/* All pages layouts */

/*===============================================================================================*/
/*===============================================================================================*/
/*===============================================================================================*/
/*===============================================================================================*/

.movie_review_area {
  padding-left: 3.0rem ;
}
.movie_review_link {
  display: flex ;
  align-items: center ;
  width: fit-content ;
  height: 2.2rem ;
  border: 1px solid var(--movie-review-border-color) ;
  background-color: var(--movie-review-bg-color) ;
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 35px;
  margin-bottom: 0.5rem ;
}
.movie_review_icon {
  height: 1.5rem;
}

/*===============================================================================================*/
/*===============================================================================================*/
/*===   Movie Page   ============================================================================*/
/*===============================================================================================*/

.movie_header_area {
    display: block;
    width: 100%;
}

.movie_content_area {
    margin-top: 2rem;
    display: grid;
    grid-template-areas: 'cover text';
    grid-column-gap: 2rem;
}

.registered .movie_content_area {
    grid-template-areas: 'cover text toolbox';
}

.anonymous .movie_toolbox { display: none; }
.registered .movie_toolbox { grid-area: toolbox; }
.movie_toolbox .button { width: 100%; }
.movie_cover_area { grid-area: cover; }
.movie_details_area { grid-area: text; }

.movie_toolbox h5 {
    margin-top: 0px;
}
.movie_toolbox div {
    margin-bottom: 1.5rem;
}

.movie_cover_area .cover-image img {
    /* object-fit: scale-down; /* in order to see landscape covers with no cropping */
    width: 100%; /* to keep the 4/3 ratio */
}

.movie_details_area dl {
  display: grid;
  grid-template-columns: max-content auto;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  margin: 0px;
}

.movie_details_area dt {
  grid-column-start: 1;
  font-weight: bold;
}

.movie_details_area dd {
  grid-column-start: 2;
  margin: 0px;
}

.cover_toolbox label {
    border: 1px solid #CCCCCC;
    padding: 1px 3px 1px 3px;
    background-color: gray;
    cursor: pointer;
}
.cover_toolbox input {
    display: none;
}
.cover_toolbox button, .cover_toolbox label{
    margin-top: 0.5rem ;
    padding: 0.375rem 0.75rem; /* so button & label have same size, .button class is not sufficient */
}



/**************************/
/***    MOVIE FORMS L   ***/
/**************************/
.movie-form-area {
    display: grid;
}
.movie-form-area-01 {
    grid-template-columns: 16% 28% 28% 28%;
    grid-row-gap: 0.5rem;
    grid-template-areas: 'source source       source       source'
                         '.      label_imdb   value_imdb   .'
                         '.      label_javid  value_javid  .'
                         '.      label_cust   value_cust   value_cust'
                         '.      button       button       .';
}
.movie-form-area-03 {
    grid-template-columns: 5% 17% 20% 58%;
    grid-row-gap: 0.5rem;
    grid-template-areas: '.  label_title      value_title     value_title'
                         '.  label_category   value_category  .'
                         '.  label_genre      value_genre     .'
                         '.  label_year       value_year      .'
                         '.  label_aka        value_aka       value_aka'
                         '.  label_actors     value_actors    value_actors'
                         '.  label_details    value_details   value_details'
                         '.  label_imdb       value_imdb      .'
                         '.  label_javid      value_javid     .'
                         '.  button           button          .';
}
.movie-form-area-edit {
    grid-template-columns: 23% 10% 20% 47%;
    grid-row-gap: 0.5rem;
    grid-template-areas: 'cover  label_title      value_title     value_title'
                         'cover  label_category   value_category  .'
                         'cover  label_genre      value_genre     .'
                         'cover  label_year       value_year      .'
                         'cover  label_aka        value_aka       value_aka'
                         'cover  label_actors     value_actors    value_actors'
                         'cover  label_details    value_details   value_details'
                         '.      button           button          .';
}

.movie-form-area-source {
    grid-area: source;
    text-align: left;
    width: 100%;
}

.movie-form-area-labelimdb { grid-area: label_imdb; }
.movie-form-area-labeljavid { grid-area: label_javid; }
.movie-form-area-labelcust { grid-area: label_cust; }
.movie-form-area-valueimdb { grid-area: value_imdb; }
.movie-form-area-valuejavid { grid-area: value_javid; }
.movie-form-area-valuecust { grid-area: value_cust; }
.movie-form-area-button { grid-area: button; }

.movie-form-area-labeltitle { grid-area: label_title; }
.movie-form-area-labelcategory { grid-area: label_category; }
.movie-form-area-labelgenre { grid-area: label_genre; }
.movie-form-area-labelyear { grid-area: label_year; }
.movie-form-area-labelaka { grid-area: label_aka; }
.movie-form-area-labelactors { grid-area: label_actors; }
.movie-form-area-labeldetails { grid-area: label_details; }

.movie-form-area-valuetitle { grid-area: value_title; }
.movie-form-area-valuecategory { grid-area: value_category; }
.movie-form-area-valuegenre { grid-area: value_genre; }
.movie-form-area-valueyear { grid-area: value_year; }
.movie-form-area-valueaka { grid-area: value_aka; }
.movie-form-area-valueactors { grid-area: value_actors; }
.movie-form-area-valuedetails { grid-area: value_details; }

.movie-form-area label {
    font-weight: bold;
    float: right;
    padding: 0.5rem;
}
.movie-form-area input, .movie-form-area textarea, .movie-form-area select {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    margin-left: 0.3rem;
    font-family: inherit;
    font-size: 0.93rem;
    line-height: 1.3rem;
    border: none;
    border-radius: 0.15rem;
}

.movie-form-area input:disabled, .movie-form-area input[disabled] {
    background-color: #AAAAAA !important ;
    color: #303030 !important ;
    cursor: default;
}







/*===============================================================================================*/
/*===============================================================================================*/
/*===   Average screens   =======================================================================*/
/*===============================================================================================*/
@media (max-width: 970px) and (min-width: 800px) {
    .movie_content_area {
        display: grid;
        grid-template-columns: 222px auto;
        grid-template-rows: max-content max-content auto;
        grid-template-areas: 'cover text';
        grid-row-gap: 1rem;
    }

    .registered .movie_content_area {
        grid-template-areas: 'cover   text'
                             'toolbox text'
                             '.       text';
    }

}

/*===============================================================================================*/
/*===============================================================================================*/
/*===   Small Screens   =========================================================================*/
/*===============================================================================================*/
@media (max-width: 799px) {
    /* MOVIE PAGE */
    .movie_content_area {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto;
        grid-template-areas:    'cover'
                                'text';
        grid-row-gap: 1rem;
    }

    .anonymous .movie_cover_area {
        width: 75%;
        margin: auto;
    }

    .registered .movie_content_area {
        grid-template-columns: 45% 45%;
        grid-template-areas:    'cover toolbox'
                                'text  text';
    }

    .movie_details_area {
        margin-top: 2rem;
    }

}


/*===============================================================================================*/
/*===============================================================================================*/
/*===   Very small screens   ====================================================================*/
/*===============================================================================================*/
@media (max-width: 550px) {


    .movie_content_area {
        grid-template-columns: 100%;
        grid-template-areas:    'cover'
                                ' text';
        justify-content: space-around;
        grid-row-gap: 1rem;
    }

    .registered .movie_content_area {
        grid-template-columns: 100%;
        grid-template-areas:    'cover'
                                'toolbox'
                                ' text';
    }

    .movie_cover_area {
        width: 75%;
        margin: auto;
    }

    .movie_cover_area dl {
        display: block;
    }

    .movie_cover_area dd {
        margin-left: 1rem;
    }


/**************************/
/***    MOVIE FORMS S   ***/
/**************************/
    .movie-form-area-01 {
        grid-template-columns: auto;
        grid-row-gap: 0.2rem;
        grid-template-areas: 'source'
                             'label_imdb'
                             'value_imdb'
                             'label_javid'
                             'value_javid'
                             'label_cust'
                             'value_cust'
                             'button';
    }
    .movie-form-area-03 {
        grid-template-columns: auto;
        grid-row-gap: 0.2rem;
        grid-template-areas: 'label_title'
                             'value_title'
                             'label_category'
                             'value_category'
                             'label_genre'
                             'value_genre'
                             'label_year'
                             'value_year'
                             'label_aka'
                             'value_aka'
                             'label_actors'
                             'value_actors'
                             'label_details'
                             'value_details'
                             'label_imdb'
                             'value_imdb'
                             'label_javid'
                             'value_javid'
                             'button';
    }
    .movie-form-area-edit {
            grid-template-columns: auto;
            grid-row-gap: 0.2rem;
            grid-template-areas: 'cover'
                                 'label_title'
                                 'value_title'
                                 'label_category'
                                 'value_category'
                                 'label_genre'
                                 'value_genre'
                                 'label_year'
                                 'value_year'
                                 'label_aka'
                                 'value_aka'
                                 'label_actors'
                                 'value_actors'
                                 'label_details'
                                 'value_details'
                                 'button';
    }



}