/*----- LAYOUT SECTION -----*/

.flexParent {
    display: block; /* The children will be one on top of each others */
    width: 100%;
}

/* THIS APPLIES ONLY IF THE SCREEN IS EQUAL OR WIDER THAN THE MIN-WIDTH VALUE */
@media (min-width: 700px) {
    .flexParent{
        display:flex;
        flex-direction: row;
        align-items: stretch; /* This causes all flex children to stretch to match the height of the container. Not needed since stretch is the default value */
        gap: 10px;
    }


    /* Sidebar container */
    .flexParent > div:first-child {
        width: 300px;
        flex-shrink: 0;
        /*overflow: auto; /*For scrolling if needed*/
    }

    /* Main container = Summary, Details & Search*/
    .flexParent > div:last-child {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        gap: 15px; /* Space between grandchildren within the second/last div*/
    }

    /* Search Container = Search Form & Search Results */
    .searchContainer{
        display: flex;
        flex-direction: column;
        gap: 15px; /* Espacio entre SearchForm y SearchResults */
    }
}

/*----- UTILITIES -----*/

.navigationButton{
    float: right;
}


/*----- CONTAINERS SECTION -----*/

/*SIDEBAR SECTION*/

.sidebarView {
    border: 2px solid #2196F3;
    border-radius: 8px;
    padding: 15px;
    background-color: #e3f2fd;
    box-sizing: border-box;
    height: 100%;
}

/*SUMMARY SECTION*/
/* A debug class, used to separate components graphically during development */
.debug {
    border-style:solid;
    border: 2px solid #4CAF50;
    border-radius: 8px;
    padding: 15px;
    background-color: #f1f8e9;
}

.numbersRightAlign{
    text-align:right;
}

/*DETAILS SECTION*/

.detailsView {
    border: 2px solid #F44336; 
    border-radius: 8px;
    padding: 20px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.detailsButton{
    margin: 20px;
}

.details-container {
    display: flex;
    gap: 20px; /* Space between image and price */
    margin-top: 10px;
}

.detailsImage {
    max-width: 300px;
    height: auto;
}

.price-info {
    display: flex;
    flex-direction: column;
    gap: 10px; 
}

/*SEARCH FORM SECTION*/

.searchFormView {
    border: 2px solid #FF9800;
    border-radius: 8px;
    padding: 15px;
    background-color: #fff3e0;
    display: block;
}

.formContainer {
    display: flex;
    align-items: center;
}

.searchFormButton{
    margin: 15px;
}

/*SEARCH RESULTS SECTION*/

.searchResultsView {
    border: 2px solid #9C27B0;
    border-radius: 8px;
    padding: 15px;
    background-color: #f3e5f5;
    display: block;
}

.result{
    text-align:center;
    display:inline-block;
    vertical-align: top;
    width: 200px;
    margin: 15px;
    padding: 10px;
    box-sizing: border-box;
}