:root {
    --primary-gradient: radial-gradient(
        ellipse at center,
        var(--primary-color) 1%,
        var(--primary-color-dark) 100%
    );

    --icon-size-line: 32px;
    --icon-size-grid: 64px;
}

/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================================================
   RESPONSIVIDADE
========================================================= */

/* Telas pequenas */
@media screen and (max-width: 645px) {
    .applications-grid .card {
        padding-bottom: 60px;
    }
    .reason-header strong{
        display: block;
        padding-top: 1em;
    }
}

/* Telas grandes */
@media screen and (min-width: 645px) {
    .applications-grid .card {
        min-height: 20em;
    }
}

@media screen and (min-width: 860px) {
    header .menu {
        text-align: right;
        float: right;
        margin-top: -39px;
    }

}
@media screen and (max-width: 859px) {
    header h1, header p{
        text-align: center;
    }
    header .menu {
        text-align: center;
    }
}
@media screen and (min-width: 1030px) {    
    .search-form {
        position: absolute;
        top: -110px;
        right: 0;
    }
    .search-form input[type="text"]{
        padding: 8px;
        font-size: .85em;
    }
    .container {
        position: relative;
    }
    .search-form button{
        padding: 8px 12px !important;
        font-size: 1em !important;
    }
}

/* =========================================================
   BASE
========================================================= */


main.container,
header .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

main.container {
    margin: 30px auto;
}

/* =========================================================
   HEADER
========================================================= */

header {

    padding: 10px;
    text-align: left;
}


/* =========================================================
   SEARCH
========================================================= */

.search-form {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.search-form input {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    font-size: 16px;
}
.application {
    position: relative;
}

.search-form button,
.application .actions a,
.application .actions button
 {
    padding: 12px 20px;
    border: none;
    border-radius: 22px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
}

.application .actions.small a{
    font-size: .7em;
    padding: 6px;
    border-radius: 10px;
}
.actions.small .additional-info{
    border-top-width: 1px;
    border-color: var(--color-border);
}


/* =========================================================
   GRID / LISTAGEM
========================================================= */

.applications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.applications-grid h3 {
    min-height: 1em;
}

.applications-grid .icon-area img {
    width: var(--icon-size-grid);
    height: var(--icon-size-grid);
}


.list-inline .card {
    margin-top: 1em;
    min-height: 8em;
}

.list-inline .icon-area img {
    width: var(--icon-size-line);
    height: var(--icon-size-line);
}

.list-inline .app-icon {
    width: var(--icon-size-line);
    height: var(--icon-size-line);
    font-size: 14px;
}

/* =========================================================
   APPLICATION CARD
========================================================= */

.card {
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: 0.2s;
    position: relative;
    cursor: pointer;
}

.card,
.breadcrumbs {
    transition: 0.2s;
}

.card:hover,
.breadcrumbs:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.card .right-area {
    max-width: calc(100% - var(--icon-size-grid) - 40px);
}

/* =========================================================
   APPLICATION STRUCTURE
========================================================= */


.application .section h2 {
    display: block;
}

.item-link, .crumb a {
    text-decoration: none;
}

/* =========================================================
   ICONS
========================================================= */



.icon-area img {
    object-fit: contain;
}

.default-icon {
    width: 36px;
    height: 36px;
}

.app-icon {
    width: var(--icon-size-grid);
    height: var(--icon-size-grid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
}

/* =========================================================
   APPLICATION CONTENT
========================================================= */

.application-content {
    max-height: 7em;
    text-overflow: ellipsis;
    /*
    overflow: hidden;
    */
}

.application-content h2 {
    margin-bottom: 10px;
    font-size: 20px;
}

.application-content p {
    line-height: 1.4;
}

/* =========================================================
   DETAIL PAGE
========================================================= */

.application-detail-card {
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.application-detail-card hr {
    margin: 30px 0;
    border: none;
    border-top: 1px solid #eee;
}

.application-detail .title-area {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 1.5em;
}

.detail-content h2 {
    margin-bottom: 15px;
}

.detail-content ul {
    margin-top: 10px;
    margin-bottom: 20px;
    padding-left: 20px;
}


.description {
    margin-bottom: 20px;
    line-height: 1.6;
}

.additional-info {
    margin-top: 20px;
    font-size: 14px;
    border-top: 1px solid #eee;
    padding-top: 1.8em;
}

/* =========================================================
   ACTIONS / BUTTONS
========================================================= */

.actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.install-button,
.secondary-button {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.2s;
}



/* =========================================================
   TAGS / BADGES
========================================================= */

.keyword-badge,
.inclusion-date,
.expiration-date {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 14px;
    margin-right: 1em;
}



/* =========================================================
   REASONS
========================================================= */

.reasons-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.reason-card {
    border-radius: 12px;
    padding: 20px;
    border-left: 4px solid #0d6efd;
}

.reason-header {
    gap: 5px;
    margin-bottom: 15px;
    font-size: 14px;
    position: relative;
}

.reason-body {
    line-height: 1.6;
}


.expiration-date {
    font-size: .75em;
    float: right;
    position: absolute;
    right: 0;
    top: 0;
}

/* =========================================================
   BREADCRUMBS
========================================================= */

.crumb-list .icon {
    padding: 0 8px;
}

.breadcrumbs {
    padding: 10px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #eee;
    font-size: .8em;
}

.breadcrumbs a {
    color: var(--primary-color);
}

/* =========================================================
   SECTIONS
========================================================= */

.applications-section {
    margin-bottom: 50px;
}

.section-title {
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 700;
}

.similar {
    margin-top: 4em;
}

/* =========================================================
   LOCATION PAGE
========================================================= */

.location-page {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.location-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.location-description {
    font-size: 16px;
    line-height: 1.7;
}

.location-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.location-attributes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* =========================================================
   ATTRIBUTE CARDS
========================================================= */

.attribute-card {
    border-radius: 14px;
    padding: 20px;
    border-left: 4px solid #0d6efd;
}

.attribute-name {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.attribute-value {
    font-size: 20px;
    font-weight: 700;
}

/* =========================================================
   FLAGS
========================================================= */

/*
.flag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
*/

.flag-badge {
    padding: 1px 10px;
    border-radius: 999px;
    color: white;
    font-size: 12px;
}

.flag-info {
    background-color: #0d6efd;
}

.flag-warning {
    background-color: #fd7e14;
}

.flag-danger {
    background-color: #dc3545;
}