/* =======================================================================
   EventLink360 - ajustari 2026-11 (inlocuiesc jQuery + pluginurile vechi)
   - butonul vechi dezactivat + butonul rosu spre pilot
   - bara de navigare care apare la derulare
   - carusel (testimoniale, capturi) + lightbox pentru capturi
   - animatiile la aparitie (inlocuiesc WOW.js)
   ======================================================================= */

html { scroll-behavior: smooth; }
section[id], header[id], #contact { scroll-margin-top: 60px; }

/* ---------- Butoanele din antet ---------- */
/* cele doua butoane unul sub altul */
header .intro-section .buttons .standard-button {
    display: block;
    width: 250px;
    max-width: 100%;
}
header .intro-section .buttons .standard-button.btn-pilot { margin-top: 12px; }
@media (max-width: 767px) {
    header .intro-section .buttons .standard-button { margin-inline: auto; }
}

.standard-button.is-disabled,
.standard-button.is-disabled:hover,
.standard-button.is-disabled:focus {
    background: #7a8a96;
    color: #e8edf1;
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.standard-button.btn-pilot {
    background: #e60042;           /* rosul din „360” */
    color: #ffffff;
    margin-top: 12px;
    font-weight: 400;
}
.standard-button.btn-pilot:hover,
.standard-button.btn-pilot:focus {
    background: #b80035;
    color: #ffffff;
}
.standard-button.btn-pilot:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* ---------- Bara de navigare: ascunsa sus, apare la derulare ---------- */
.js .sticky-navigation {
    transform: translateY(-100%);
    transition: transform .4s ease;
}
.js .sticky-navigation.nav-visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .sticky-navigation { transition: none; }
}
/* meniul mobil (Bootstrap 3 fara JS-ul lui) */
@media (max-width: 767px) {
    .navbar-collapse.collapse { display: none; }
    .navbar-collapse.collapse.in { display: block; max-height: calc(100vh - 60px); overflow-y: auto; }
}
.scroll-down-list { list-style: none; padding: 0; margin: 0; }

/* ---------- Carusel ---------- */
.js .el-carousel { position: relative; }
.js .el-carousel .c-viewport { overflow: hidden; touch-action: pan-y; }
.js .el-carousel .c-track {
    display: flex;
    align-items: stretch;
    transition: transform .6s ease;
    will-change: transform;
}
.js .el-carousel .c-item { flex: 0 0 auto; min-width: 0; }
@media (prefers-reduced-motion: reduce) {
    .js .el-carousel .c-track { transition: none; }
}
.el-carousel .owl-controls { margin-top: 10px; text-align: center; }
.el-carousel .owl-page {
    display: inline-block;
    background: none;
    border: 0;
    padding: 4px;
    cursor: pointer;
}
.el-carousel .owl-page span {
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px 3px;
    opacity: .5;
    border-radius: 20px;
    background: #869791;
}
.el-carousel .owl-page.active span,
.el-carousel .owl-page:hover span { opacity: 1; }
.el-carousel .owl-page:focus-visible { outline: 2px solid currentColor; border-radius: 50%; }
.screenshots .el-carousel .owl-page span { background: #008ed6; }
.testimonials .el-carousel .owl-page span { background: #ffffff; border-radius: 50%; }
.screenshots .shot a { display: block; cursor: zoom-in; }

/* ---------- Lightbox ---------- */
.el-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 60px;
}
.el-lightbox[hidden] { display: none; }
.el-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .6);
}
.el-lightbox button {
    position: absolute;
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
    border: 0;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 28px;
    line-height: 48px;
    padding: 0;
    cursor: pointer;
}
.el-lightbox button:hover,
.el-lightbox button:focus-visible { background: rgba(255, 255, 255, .3); outline: none; }
.el-lightbox .lb-close { top: 10px; inset-inline-end: 10px; }
.el-lightbox .lb-prev { inset-inline-start: 8px; top: 50%; margin-top: -24px; }
.el-lightbox .lb-next { inset-inline-end: 8px; top: 50%; margin-top: -24px; }
@media (max-width: 480px) {
    .el-lightbox { padding: 60px 8px; }
    .el-lightbox .lb-prev,
    .el-lightbox .lb-next { top: auto; bottom: 8px; margin-top: 0; }
}

/* ---------- Animatii la aparitie (inlocuiesc WOW.js) ---------- */
.js .wow.wow-wait { visibility: hidden; animation-name: none !important; }

/* ---------- Butonul „sus” ---------- */
a.back-to-top.is-shown { display: block; }

/* ---------- Formularul de contact ---------- */
footer .contact-box .contact-button { display: block; }
footer .contact-box .expanded-contact-form.is-open { display: block; }

/* =======================================================================
   11.11.2026 (CS)
   ======================================================================= */

/* ---------- Antetul pe desktop: in locul benzii negre ----------
   Sablonul cerea un video de fundal (video/video.mp4), care n-a existat niciodata pe server;
   peste 640 px ramanea fundalul #232323. Acum, din filmuletul de pe appdemo2 (cadrul de la 33 s):
   - fondul pastel al cadrului, fara glob (hero-bg.jpg), pe tot antetul;
   - globul cu meet / know / engage / share / interact (hero-globe.webp), numai in coloana din
     dreapta, in locul telefoanelor; coloana stanga (titlu, butoane) ramane curata.
   Sigla de sus se ascunde pe desktop: o poarta deja globul (altfel aparea de doua ori).
   Sub 640 px ramane bg-1.jpg, ca pana acum (responsive.css); sub 768 px coloana e ascunsa (hidden-xs). */
@media (min-width: 641px) {
    header {
        background: #b9a59f url('../images/hero-bg.jpg') no-repeat center center;
        background-size: cover;
    }
    header .color-overlay { background: rgba(0, 0, 0, .28); }
    /* benzile negre de la testimoniale si descarcare: aceeasi cauza (video inexistent);
       pe desktop primesc imaginile pe care le aveau deja pe telefon */
    .testimonials {
        background: #232323 url('../images/bg-2.jpg') no-repeat center center;
        background-size: cover;
    }
    .download {
        background: #232323 url('../images/bg-3.jpg') no-repeat center center;
        background-size: cover;
    }
    header .intro-section .intro,
    header .intro-section h5 { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
}
@media (min-width: 768px) {
    header .only-logo { visibility: hidden; height: 120px; }
    header .only-logo .navbar { padding: 0; }
    header .home-contents { display: flex; align-items: center; flex-wrap: wrap; }
    header .home-contents > [class*="col-"] { float: none; }
    header .home-contents > center { flex: 0 0 100%; }
    header .home-contents::before, header .home-contents::after { display: none; }
    header .home-contents .phone-image { max-width: none; margin: 0; }
    /* aceeasi umbrire ca stratul .color-overlay de deasupra fondului (28% negru), ca marginile sa se topeasca */
    header .home-contents .phone-image .hero-globe { width: 100%; height: auto; filter: brightness(.72); }
}

/* ---------- Meniul pe telefon: bara e mereu vizibila (hamburgerul se vede de sus) ---------- */
@media (max-width: 767px) {
    .js .sticky-navigation { transform: none; }
    header .only-logo { padding-top: 60px; }
}
/* pe desktop incap si cele trei legaturi noi */
@media (min-width: 992px) {
    .sticky-navigation .main-navigation > li > a { padding-left: 10px; padding-right: 10px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .sticky-navigation .main-navigation > li > a { padding-left: 6px; padding-right: 6px; font-size: 12px; }
}

/* ---------- Subsol: legaturile noi ---------- */
footer .footer-links {
    padding-top: 22px;
    line-height: 2;
}
footer .footer-links a {
    display: inline-block;
    margin: 0 12px;
    color: #008ed6;
}
footer .footer-links a:hover,
footer .footer-links a:focus { color: #005885; text-decoration: underline; }
/* pe paginile noi, subsolul nu are cutia de contact */
.subpage footer { padding-top: 50px; }

/* ---------- Paginile noi: antet scurt ---------- */
/* pe desktop, antetul scurt arata partea de sus a cadrului (meet / know / engage), nu sigla mare */
@media (min-width: 641px) {
    .el-page-header .color-overlay { background: rgba(0, 0, 0, .40); }
    .el-page-header .page-title,
    .el-page-header .page-lead { text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
}
.el-page-header .color-overlay {
    min-height: 0 !important;
    padding-top: 130px;
    padding-bottom: 70px;
}
.el-page-header .page-title {
    color: #ffffff;
    font-size: 54px;
    margin: 0 0 16px;
}
.el-page-header .page-lead {
    color: #ffffff;
    font-size: 18px;
    max-width: 640px;
    margin: 0 auto;
}
@media (max-width: 767px) {
    .el-page-header .color-overlay { padding-top: 100px; padding-bottom: 50px; }
    .el-page-header .page-title { font-size: 40px; }
    .el-page-header .page-lead { font-size: 16px; padding: 0 10px; }
}
.page-content {
    background: #ffffff;
    padding-top: 70px;
    padding-bottom: 80px;
}

/* ---------- Reclamatii ---------- */
.complaints-text { max-width: 760px; margin: 0 auto; text-align: start; }
.complaints-text h2 { font-size: 26px; margin: 40px 0 14px; color: #008ed6; }
.complaints-text ul { padding-inline-start: 22px; margin-bottom: 14px; }
.complaints-text li { margin-bottom: 6px; }
.complaints-text strong { font-weight: 400; }
.complaints-mail {
    text-align: center;
    background: #F7F8FA;
    border-radius: 6px;
    padding: 34px 20px;
}
.complaints-mail i { font-size: 44px; color: #008ed6; }
.complaints-mail p { margin: 10px 0 4px; }
.complaints-mail a {
    font-size: 24px;
    font-weight: 400;
    color: #e60042;
    word-break: break-all;
}
@media (max-width: 480px) { .complaints-mail a { font-size: 19px; } }

/* fontul titlurilor vechi (Lane) nu are ș, ț, ă, î, â: pe paginile noi titlurile sunt in Roboto subtire */
.el-page-header .page-title { font-family: 'Roboto', sans-serif; font-weight: 100; }
.page-content h2 { font-family: 'Roboto', sans-serif; font-weight: 300; }

/* sageata din antet: sub coloane (fara telefoane, coloana din dreapta e goala si nu mai impinge) */
header .home-contents > center { clear: both; }