/* =========================================================================
   PRIME FORCE LOGISZTIKAI ARCULAT – 2026 stílus
   Industrial – Dark Mode – Sárga/Fekete domináns
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   1. VÁLTOZÓK – ÚJ SÖTÉT/SÁRGA PALETTA
   ========================================================================== */
:root {
    --color-bg-main:    #0a0a0a;       /* Mély fekete háttér */
    --color-bg-footer:  #000000;       /* Tiszta fekete */
    --color-bg-card:    #141414;       /* Kártyák sötétszürke háttere */
    --color-bg-light:   #1f1f1f;       /* Kiemelések háttere */
    
    --color-text-main:  #fca311;       /* Prime Force Sárga/Arany */
    --color-text-sub:   #a0a0a0;       /* Szürke másodlagos szöveg */
    --color-text-light: #f4f4f4;       /* Világos szövegszín */
    
    --color-accent:     #fca311;       /* Fő sárga kiemelés */
    --color-accent-dark:#e08b00;       /* Sötétebb sárga hoverhez */
    --color-primary:    #222222;       /* Sötét panel szín */
    
    --color-border:     #333333;       /* Sötét szürke keretek */
    --color-shadow:     0 8px 24px rgba(0, 0, 0, 0.8);
    --color-shadow-hover: 0 8px 32px rgba(252, 163, 17, 0.15); /* Sárgás derítés hoverre */
    
    --color-nav-link-color: #ffffff;
    --color-nav-link-hover: #fca311;
    
    --border-radius:    4px;           /* Szögletesebb, indusztriális formák */
    --border-radius-lg: 8px;

    /* Prime Force arculat: Montserrat mindenhol */
    --font-heading:     "Montserrat", sans-serif;
    --font-body:        "Montserrat", sans-serif;
    --font-serif:       "Montserrat", sans-serif; 
}

/* Kiegészítő osztályok */
.fs-5 {
    color: var(--color-bg-main);
    text-shadow: none;
    text-transform: uppercase;
    background: var(--color-accent);
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 700;
}

h2.cim, h3.cim {
    color: var(--color-nav-link-color);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.center { text-align: center; }

.kenyer {
    color: var(--color-text-sub); 
    font-weight: 600;
    font-size: 1.1em;
    margin:0; padding: 0;
}

.main-text {
    color: var(--color-text-light); 
    font-weight: 800;
  
    padding: 0;
}

.sub-text {
    color: var(--color-accent); 
    font-weight: 700;
    margin:0; padding: 0;
    margin-bottom: 0.5rem;
}

/* Alap beállítások */
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    line-height: 1.6;
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-sub); 
    background: var(--color-bg-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.body-box {
    background: var(--color-bg-card);
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
}

main { flex: 1; }

/* Bannerek */
.banner {
    width: 100%;
    height: 350px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: var(--color-text-light);
    border-bottom: 2px solid var(--color-accent);
}

.imga-box {
    height: 450px;
    width: 550px; 
    position: absolute;
    top: 50px;
}

/* ==========================================================================
   2. TIPOGRÁFIA
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--color-text-light); 
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

h1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.2; }
h1 span { color: var(--color-accent); } /* Logóhoz hasonló kiemelés */

.lead { 
   font-family: var(--font-body);
   font-size: 1.2rem;
   font-weight: 500;
   line-height: 1.6;
   color: var(--color-accent);
}

.page-title-column p, .page-title-column li { color: var(--color-text-sub); }

a {
    color: var(--color-nav-link-color);
    transition: all 0.3s ease;
    text-decoration: none;
}

a:hover { color: var(--color-nav-link-hover); }

.line {
    border-bottom: 1px solid var(--color-border);
    margin: 2rem 0;
    position: relative;
}
/* Díszcsík a vonal közepén, mint a képen a "SZOLGÁLTATÁSAINK" mellett */
.line::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background-color: var(--color-accent);
}

/* ==========================================================================
   3. GOMBOK – Letisztult, indusztriális stílus (Nincs bézs 3D gradient)
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Kontúros gomb (Sárga keret, átlátszó háttér) */
.btn-outline {
    padding: 0.9rem 1.9rem;
    background: transparent !important;
    color: var(--color-accent) !important;
    border: 2px solid var(--color-accent) !important;
    box-shadow: none;
}

.btn-outline:hover {
    background: var(--color-accent) !important;
    color: var(--color-bg-main) !important;
    box-shadow: 0 4px 15px rgba(252, 163, 17, 0.3);
}

/* Elsődleges gomb (Teljes sárga) */
.btn-success, .btn-submit-quote {
    padding: 1rem 2rem !important;
    background: var(--color-accent) !important;
    color: var(--color-bg-main) !important;
    border: 2px solid var(--color-accent) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.btn-success:hover, .btn-submit-quote:hover:not(:disabled) {
    background: var(--color-accent-dark) !important;
    border-color: var(--color-accent-dark) !important;
    color: var(--color-bg-main) !important;
    box-shadow: 0 6px 15px rgba(252, 163, 17, 0.4);
}

.btn-secondary.w-100 {
    padding: 0.9rem 1.9rem;
    background: var(--color-bg-light) !important;
    color: var(--color-text-light) !important;
    border: 1px solid var(--color-border) !important;
}

.btn-secondary.w-100:hover {
    background: var(--color-border) !important;
    color: #fff !important; 
    border-color: var(--color-text-sub) !important;
}

.btn-submit-quote:disabled {
    background: #333 !important;
    color: #666 !important;
    border: 1px solid #444 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* ==========================================================================
   4. KÁRTYÁK – Sötét mód, sárga hover
   ========================================================================== */
.card,
.product-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--color-shadow);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.card:hover,
.product-card:hover {
    border-color: var(--color-accent) !important;
    box-shadow: var(--color-shadow-hover);
    transform: translateY(-5px);
}

.card-img-top,
.card-img-container {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: var(--color-bg-main);
}

.card-body {
    flex: 1 1 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 1.1rem;
    margin: 0 0 0.8rem;
    text-align: center;
    color: var(--color-text-light);
    font-weight: 700;
    text-transform: uppercase;
}

.card-text { font-size: 0.9rem; color: var(--color-text-sub); text-align: center;}

/* Full-width konténerek */
.container-wide {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section-padding { padding: 5rem 0; }
.section-bg-light { background: var(--color-bg-light); border-top: 1px solid var(--color-border); }

/* Űrlapok / Inputok */
form label {
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-text-sub);
    margin-bottom: 6px;
    display: block;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.form-control, .form-select {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-light);
    background: var(--color-bg-card);  
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 0.8rem 1rem;
    transition: border-color 0.3s ease;
}

.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(252, 163, 17, 0.2);
    background: #1a1a1a;
    color: #fff;
}

/* ==========================================================================
   5. HEADER / NAV / HERO
   ========================================================================== */
.navbar {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
}

.navbar-brand {
    font-weight: 800;
    font-size: 1.8rem;
    color: var(--color-text-light);
    letter-spacing: 2px;
}
.navbar-brand span { color: var(--color-accent); }

.nav-link {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
    padding: 0.6rem 1.1rem !important;
}

.nav-link:hover,
.nav-link.active { color: var(--color-accent); }

.dropdown-menu {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
}

.dropdown-item {
    color: var(--color-text-sub);
    font-weight: 600;
}
.dropdown-item:hover {
    background-color: var(--color-bg-light);
    color: var(--color-accent);
}

.hero {
    position: relative;
    min-height: 70vh;
    background: linear-gradient(rgba(10,10,10,0.7), rgba(10,10,10,0.9)),
                url('hero-bg.jpg') center/cover no-repeat; /* Ide jöhet a raktáros kép */
    color: white;
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--color-border);
}

.hero-content {
    max-width: 900px;
    padding: 2rem;
}

.card-img-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--color-bg-main);
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    overflow: hidden;
    transition: transform 0.35s ease;
}

/* ==========================================================================
   6. TERMÉKLISTA ÉS GRID
   ========================================================================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem 1.5rem;
}

/* ==========================================================================
   7. LÁBLÉC ÉS KAPCSOLATI RÉSZ
   ========================================================================== */
.footer {
    background: var(--color-bg-footer);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-sub);
    font-size: 1rem;
    padding: 3rem 0;
}

footer a { 
    color: var(--color-text-sub); 
    text-decoration: none;
    transition: color 0.3s ease;     
}

footer a:hover { color: var(--color-accent); }
 
.footer .text-uppercase {
    color: var(--color-text-light)!important;                  
    font-weight: 700;
    letter-spacing: 0.1em;          
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   MOBILE BOTTOM NAVIGATION BAR
   ========================================================================== */
.mobile-footer-nav { display: none; }

@media (max-width: 991.98px) {
    .mobile-footer-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 68px;
        background: var(--color-bg-card);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
        z-index: 1030;
        justify-content: space-around;
        align-items: center;
    }
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .mobile-footer-nav {
            padding-bottom: env(safe-area-inset-bottom);
            height: calc(68px + env(safe-area-inset-bottom));
        }
    }
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

.mobile-nav-link {
    display: flex; flex-direction: column; align-items: center; flex: 1;
    color: var(--color-text-sub);
    font-size: 0.85rem; font-weight: 600;
    text-transform: uppercase;
}

.mobile-nav-link:hover, .mobile-nav-link.active {
    color: var(--color-accent);
}

/* ==========================================================================
   8. RESZPONZÍV FINOMHANGOLÁS
   ========================================================================== */
@media (max-width: 992px) {
    .section-padding { padding: 3.5rem 0; }
    h1 { font-size: 2.5rem; }
}

@media (max-width: 768px) {
    body { font-size: 0.95rem; }
    .product-grid { gap: 1.5rem; }
    .btn { padding: 0.85rem 1.6rem; }
    .imga-box { display: none; }
}

/* ==========================================================================
   9. TISZTÍTÁS ÉS EGYÉB MEGJELENÉS (Sötét módhoz igazítva)
   ========================================================================== */
hr, .hr, .border, .border-top, .border-bottom, .list-group-item, .bg-light {
    border-color: var(--color-border) !important;
}

/* A LEAD BOX (Kiemelt szövegdoboz a PRIME FORCE stílusában) */
main .col-lg-9 .lead,
.bg-light.rounded.p-3 h2,
.page-title-column h1 + p {
    font-size: 1.1rem; 
    color: var(--color-text-light); 
    background-color: var(--color-bg-light); /* Sötét panel */
    border: 1px solid var(--color-border) !important; 
    border-left: 6px solid var(--color-accent) !important; /* Sárga indusztriális vonal */
    border-radius: var(--border-radius);
    padding: 24px 30px;
    margin-bottom: 35px;
    display: block !important;
    box-shadow: var(--color-shadow);
}

/* Listaelemek sötétítése */
main .col-lg-9 .list-group-item {
    background-color: transparent;
    color: var(--color-text-sub);
    border-bottom: 1px solid var(--color-border) !important;
}
main .col-lg-9 .list-group-item:nth-child(even) span:last-child {
    background: var(--color-bg-light) !important;
}

/* Üres helyek eltüntetése */
main .col-lg-9 br, main .col-lg-9 p:empty, main .col-lg-9 div:empty {
    display: none !important;
}

/* Oldalcímek formázása */
h1.category-title, 
h1.page-title,
main h1:first-of-type {
    font-weight: 800 !important;
    font-size: 2.2rem !important;
    color: var(--color-accent) !important; /* Sárga címek */
    text-transform: uppercase;
    margin-bottom: 1.8rem !important;
}