.movie-form-page {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 38px 35px 70px;
}


/* HEADER */

.form-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 28px;
}


.form-eyebrow {
    color: #ff4968;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}


.form-page-header h1 {
    margin: 7px 0 0;
    color: #ffffff;
    font-size: 30px;
    font-weight: 750;
    letter-spacing: -0.8px;
    text-transform: capitalize;
}


.form-page-header p {
    margin: 7px 0 0;
    color: #717783;
    font-size: 11px;
}


.back-button {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.03);
    color: #8b919d;
    font-size: 10px;
    cursor: pointer;
}


    .back-button:hover {
        background: rgba(255, 255, 255, 0.07);
        color: white;
    }


/* LAYOUT */

.form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 20px;
    align-items: start;
}


.form-main-column,
.form-side-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* CARD */

.form-card {
    padding: 23px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 15px;
    background: linear-gradient( 145deg, #12151b, #0e1015 );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.13);
}


.form-card-header {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 22px;
}


.section-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 49, 88, 0.09);
    color: #ff4a68;
}


    .section-icon i {
        font-size: 16px;
    }


.form-card-header h2 {
    margin: 0;
    color: #e9ebef;
    font-size: 14px;
    font-weight: 650;
}


.form-card-header p {
    margin: 3px 0 0;
    color: #5f6570;
    font-size: 9px;
}


/* GRID */

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 17px;
}


    .form-grid.two-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


.field-full {
    grid-column: 1 / -1;
}


/* CAMPOS */

.field-group {
    min-width: 0;
}


    .field-group label {
        display: block;
        margin-bottom: 7px;
        color: #aeb2bc;
        font-size: 9px;
        font-weight: 650;
    }


.movie-input {
    width: 100%;
    min-height: 45px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    outline: none;
    background: #171a21;
    color: #e7e9ed;
    font-size: 11px;
    box-shadow: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}


    .movie-input:focus {
        background: #191d25;
        border-color: rgba(255, 49, 88, 0.5);
        box-shadow: 0 0 0 3px rgba(255, 49, 88, 0.06);
    }


    .movie-input::placeholder {
        color: #484e59;
    }


.movie-textarea {
    min-height: 125px;
    padding-top: 12px;
    resize: vertical;
}


select.movie-input {
    cursor: pointer;
}


.field-validation {
    display: block;
    margin-top: 5px;
    color: #ff637b;
    font-size: 8px;
}


.form-validation-summary {
    margin-bottom: 20px;
    padding: 11px 14px;
    border-radius: 9px;
    color: #ff677e;
    background: rgba(255, 49, 88, 0.08);
    font-size: 9px;
}


/* INPUT COM ÍCONE */

.input-with-icon {
    position: relative;
}


    .input-with-icon > i {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        color: #535a65;
    }


    .input-with-icon .movie-input {
        padding-left: 37px;
    }


/* CAPA */

.cover-preview {
    width: 100%;
    aspect-ratio: 2 / 3;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 13px;
    background: #090b0e;
    border: 1px solid rgba(255, 255, 255, 0.06);
}


    .cover-preview img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }


.cover-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #464c57;
    background: radial-gradient( circle at 50% 35%, rgba(255, 49, 88, 0.08), transparent 35% ), #101218;
}


    .cover-empty i {
        font-size: 31px;
    }


    .cover-empty span {
        font-size: 9px;
    }


/* UPLOAD CAPA */

.cover-upload-button {
    width: 100%;
    min-height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 13px;
    border: 1px dashed rgba(255, 255, 255, 0.13);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.025);
    color: #858b96;
    font-size: 9px;
    cursor: pointer;
    transition: 0.2s ease;
}


    .cover-upload-button:hover {
        color: #ffffff;
        border-color: rgba(255, 49, 88, 0.4);
        background: rgba(255, 49, 88, 0.05);
    }


.cover-file-name {
    display: block;
    margin-top: 8px;
    overflow: hidden;
    color: #656b76;
    font-size: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.hidden-file-input {
    display: none;
}


/* UPLOAD VÍDEO */

.upload-box {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.018);
}


.upload-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 49, 88, 0.08);
    color: #ff526d;
}


.upload-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}


    .upload-content strong {
        color: #d9dce2;
        font-size: 10px;
    }


    .upload-content span {
        margin-top: 3px;
        color: #5f6570;
        font-size: 8px;
    }


.upload-button {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
    color: #a4a9b2;
    font-size: 8px;
    cursor: pointer;
}


    .upload-button:hover {
        background: rgba(255, 255, 255, 0.09);
        color: white;
    }


/* ARQUIVO SELECIONADO */

.selected-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 9px;
    background: rgba(67, 203, 145, 0.055);
    border: 1px solid rgba(67, 203, 145, 0.10);
    color: #737a85;
}


    .selected-file > i:first-child {
        font-size: 20px;
        color: #58d69c;
    }


    .selected-file > div {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }


    .selected-file strong {
        overflow: hidden;
        color: #bfc3cb;
        font-size: 9px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .selected-file span {
        margin-top: 2px;
        color: #555b65;
        font-size: 8px;
    }


.selected-check {
    color: #4fd396;
}


/* AÇÕES */

.actions-card {
    display: flex;
    gap: 9px;
}


.save-button,
.cancel-button {
    width: 100%;
    min-height: 45px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
    transition: 0.2s ease;
}


.save-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    background: linear-gradient( 135deg, #ff3158, #ff4f68 );
    color: white;
    box-shadow: 0 9px 24px rgba(255, 49, 88, 0.18);
}


    .save-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 13px 28px rgba(255, 49, 88, 0.26);
    }


.cancel-button {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
    color: #777d88;
}


    .cancel-button:hover {
        background: rgba(255, 255, 255, 0.06);
        color: white;
    }


/* RESPONSIVO */

@media (max-width: 950px) {

    .form-layout {
        grid-template-columns: 1fr;
    }


    .form-side-column {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }


    .cover-card {
        grid-row: span 2;
    }
}


@media (max-width: 700px) {

    .movie-form-page {
        padding: 28px 17px 55px;
    }


    .form-page-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .form-grid.two-columns {
        grid-template-columns: 1fr;
    }


    .form-side-column {
        display: flex;
    }


    .upload-box {
        align-items: flex-start;
        flex-direction: column;
    }


    .upload-button {
        width: 100%;
        justify-content: center;
    }
}