/* ALAPBEÁLLÍTÁSOK */
:root {
    /*--ovir-orange: #F27121;*/
    --ovir-orange: #e15600;
    --ovir-dark: #2C3E50;
    --ovir-light: #F8F9FA;
    --text-color: #444;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    color: var(--text-color);
    line-height: 1.6;
    background-color: #f7f7f7;
}

.highlighted {
    font-weight: bold;
}

.container{
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.navbar{
    align-items: center;
    display: grid;
    column-gap: 5px;
    row-gap: 10px;
    grid-template-columns: 300px auto 300px;
}


.navbar-grid {
    display: inline-grid;
}
.logo, .navbar-grid img{
    height: 110px;
}

/* HERO RÉSZ */
.hero-wrapper {
    filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.6));
    background: transparent;
}

.hero {
    background-color: var(--ovir-dark);
    color: white;
    padding: 40px 0;
    clip-path: ellipse(150% 100% at 50% 0%);
    margin-top: 3px;
    margin-bottom: 10px;
}

.hero-content {
    flex: 1;
    min-width: 300px;
}

.hero-content h1 {
    color: #F27121;
}
.hero-content h2 {
    color: var(--ovir-light); /* Sötét antracit a komolyságért */
    border-left: 5px solid var(--ovir-orange); /* Narancssárga díszítő vonal az alcím mellett */
    padding-left: 15px;
    margin-bottom: 25px;
}
.hero-content h3 {
    color: #1a5da4;
}

.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    color: white;
}

.tagline {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* GOMBOK */
.btn, .nav-links a.ui-menuitem-link, .nav-links a.ui-menuitem{
    padding: 14px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    margin-right: 15px;
    transition: 0.3s;
}

.ui-widget.ui-menuitem.btn-primary{
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    margin-right: 15px;
}

.nav-links a.ui-menuitem-link.ovirButton{
    width: 200px;
}

.ui-widget.ui-menuitem.btn-primary:not(.ui-menuitem-highlight) span{
    color: var(--ovir-light);
}
.ui-widget.ui-menuitem.btn-primary.ui-menuitem-highlight .ui-submenu-link span{
    color: var(--ovir-dark);
}

.btn-primary, .ui-widget.ui-menuitem.btn-primary, .loginButton button {
    background-color: var(--ovir-orange);
    border: 2px solid var(--ovir-orange);
    color: white;
}
.backOrange{
    background: #e14f1c url(/resources/images/jquery/ui-bg_diamond_22_e14f1c_10x8.png?ln=images) 50% 50% repeat;
}
.backBlue{
    background: #1484e6 url(/resources/images/jquery/ui-bg_diamond_22_1484e6_10x8.png?ln=images) 50% 50% repeat;
    border: 2px solid #1484e6;
}

.btn-submenu .ui-menu-list a {
    width: 200px !important;
    height: auto;
    text-align: center;
}
.btn-submenu ul {
    left: -110px !important;
    width: 260px !important;
}

a.ui-menuitem-link.btn-primary:hover, a.loginButton button:hover {
    border: 2px solid white;
    color: white;
    background: white;
    color: var(--ovir-dark);
}

a.ui-menuitem-link.btn-secondary, li.ui-menuitem.btn-secondary a, a.ui-menuitem-link.btn-primary, .ui-menu .ui-menu-list .ui-menuitem.btn-primary {
    border: 2px solid white;
    color: white;
}

a.ui-menuitem-link.btn-secondary:hover, .ui-widget.ui-menuitem.btn-primary:hover {
    background: white;
    color: var(--ovir-dark);
}


/* MOCKUP HELYETTESEÍTŐ */
.hero-image {
    flex: 1;
    min-width: 350px;
    display: flex;
    justify-content: center;
}

.mockup-placeholder {
    border-radius: 10px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.mockup-placeholder-gray {
    background: #333;
    border: 10px solid #444;
}

.mockup-placeholder-dark {
    background: var(--ovir-dark);
    border: 10px solid var(--ovir-dark);
}

.mockup-placeholder-orange {
    background: var(--ovir-orange);
    border: 10px solid var(--ovir-orange);
}

.screen-content {
    color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.screen-content img {
    width: 400px;
}


/* MODULOK */
.modules {
}

.separator {
    width: auto;
    height: 10px;
}

.module-card:hover {
    border-color: #1a5da4; /* Kijelölődik, ha fölé viszik az egeret */
    border-image-source: linear-gradient(to bottom, var(--ovir-dark), transparent);
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.8), 0 4px 20px 0 rgba(0, 0, 0, 0.8);
}

.module-grid {
    display: flex;
    gap: 30px;
    width: 100%;
}

.module-card {
    flex: 1;

    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.6), 0 4px 20px 0 rgba(0, 0, 0, 0.6);
    background-color: var(--ovir-light);
    background: var(--ovir-light);

    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin:  0;
    margin-bottom:  30px;
    transition: border-color 0.2s ease;

    border: 2px solid #e1e8ed;
    border-top: 5px solid var(--ovir-orange);
    border-image-source: linear-gradient(to bottom, var(--ovir-orange), transparent);
    border-image-slice: 1;
}

.module-card h1 {
    color: #F27121;
}
.module-card h2 {
    color: var(--ovir-dark); /* Sötét antracit a komolyságért */
    border-left: 5px solid var(--ovir-orange); /* Narancssárga díszítő vonal az alcím mellett */
    padding-left: 15px;
    margin-bottom: 25px;
}
.module-card h3 {
    color: #1a5da4;
}

.icon-orange {
    font-size: 2rem;
    color: var(--ovir-orange);
    margin-bottom: 15px;
}

.module-card h3 {
    margin-top: 0;
    color: var(--ovir-dark);
}

/* Felülírjuk a PrimeFaces alapértelmezett panel kereteit, hogy tisztább legyen */
.ui-panel.module-card {
    border: none !important;
    background: white !important;
    padding: 0 !important;
}

.ui-panel.module-card .ui-panel-content {
    padding: 20px !important;
}

/* Egyedi stílus a LinkButton-hoz, hogy illeszkedjen a mockup-hoz */
.ui-button.btn-ovir-primary {
    background-color: #F27121 !important;
    border: none !important;
    color: white !important;
    font-weight: bold !important;
    padding: 10px 20px !important;
}

.ui-button.btn-ovir-outline {
    background: transparent !important;
    border: 2px solid white !important;
    color: white !important;
}

/* Navigációs linkek igazítása */

.navbar-container{
    background-color: var(--ovir-dark);
    color: white;
}
.navbar-box{
    background-color: var(--ovir-dark);
    color: white;
}

.nav-links .ui-link {
    margin-right: 20px;
    text-decoration: none;
    font-weight: 500;
}
.link-dark  {
    color: var(--ovir-dark);
}
.link-light  {
    color: var(--ovir-light);
}


.headerSpan{
    color: var(--ovir-orange);
    font-size: 2em;
    font-weight: bold;
}

.submenu ul.ui-widget-content.ui-menu-list, .submenuLogin ul.ui-widget-content.ui-menu-list{
    margin: 0;
}

li.submenu ul .ui-menuitem-link.ui-corner-all.btn-secondary, li.submenu ul .ui-menuitem-link.ui-corner-all.btn-primary{
    width: -webkit-fill-available;
}
li.submenu ul, li.submenuLogin ul{
    background-color: var(--ovir-dark);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.4), 0 4px 20px 0 rgba(0, 0, 0, 0.4);
}
li.submenu ul{
    width:400px !important;
}
li.submenuLogin ul{
    width:260px !important;
}

/* kalkuláror */

.price-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    overflow: hidden;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.price-table thead tr {
    background: var(--ovir-dark);
    color: var(--ovir-light);
    font-weight: bold;
    border-radius: 8px 8px 0 0;
}

.price-table th, .price-table td {
    padding: 12px 15px;
}

.price-table tbody, .price-table tbody td, .price-table tbody tr, .price-table thead {
    border: 1px solid var(--ovir-dark);
}

.price-table tbody tr:nth-of-type(even) {
}



.footerBox{
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px;
    display: grid;
    column-gap: 5px;
    row-gap: 10px;
    grid-template-columns: auto auto auto;
}