/* ============================================ */
/* CSS VÁLTOZÓK - KÖZPONTI SZÍNPALETTA          */
/* Brand színek és állandók egy helyen          */
/* ============================================ */
:root { 
    --epson-blue: #003399; 
    --accent-blue: #005ce6;
    --soft-blue: #f0f5ff; 
    --bg-gray: #f4f7fa;
    --dark-gray: #333;
    --border-light: #e0e0e0;
    --error-red: #d93025;
    --success-green: #28a745;
}

/* ============================================ */
/* ÁLTALÁNOS BODY ÉS ALAPSTÍLUSOK               */
/* Alapértelmezett betűtípus, margó, színek     */
/* ============================================ */
body { 
    font-family: 'Segoe UI', Arial, sans-serif; 
    margin: 0; 
    color: var(--dark-gray); 
    background: #fff; 
    line-height: 1.6; 
    overflow-x: hidden; 
}

/* ============================================ */
/* FELSŐ SÁV - KAPCSOLATI INFORMÁCIÓK           */
/* Telefon, email, országos kiszállás info      */
/* ============================================ */
.top-bar {
    background: #fff; 
    padding: 8px 20px; 
    border-bottom: 1px solid var(--border-light);
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 25px;
    font-size: 0.85rem; 
    color: var(--epson-blue); 
    font-weight: 600;
}
.top-bar a { 
    text-decoration: none; 
    color: var(--epson-blue); 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

/* ============================================ */
/* HEADER SZEKCIÓ - FŐ CÍMSOR ÉS HERO          */
/* Nagy cím, alcím, CTA gomb                     */
/* ============================================ */
header { 
    text-align: center; 
    padding: 40px 20px 60px;
    background: var(--soft-blue); 
    border-bottom: 1px solid #ddecff;
}
header h1 { 
    font-size: 2.6rem; 
    font-weight: 800; 
    color: var(--epson-blue); 
    margin: 0; 
    letter-spacing: -1px; 
}
header h1 span { 
    color: var(--accent-blue); 
}
.hero-sub { 
    color: #444; 
    font-size: 1.2rem; 
    margin: 15px 0 35px; 
    max-width: 750px; 
    margin-left: auto; 
    margin-right: auto; 
}

/* ============================================ */
/* FŐ CTA GOMB STÍLUS                           */
/* Call-to-action gombok design                  */
/* ============================================ */
.btn-main { 
    display: inline-block; 
    padding: 16px 40px; 
    background: var(--epson-blue); 
    color: #fff; 
    text-decoration: none;
    font-weight: bold; 
    border-radius: 50px; 
    transition: 0.3s; 
    text-transform: uppercase; 
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(0, 51, 153, 0.2); 
    cursor: pointer; 
    border: none;
}
.btn-main:hover { 
    background: var(--accent-blue); 
    transform: translateY(-2px); 
}

/* ============================================ */
/* CAROUSEL (KÖRHINTA) - NYOMTATÓ MODELLEK      */
/* Swiper slider a nyomtatók megjelenítésére    */
/* ============================================ */
.carousel-outer { 
    max-width: 1100px; 
    margin: 40px auto; 
    overflow: hidden; 
    position: relative; 
}
.swiper { 
    padding: 60px 0 !important; 
}
.swiper-slide { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    transition: 0.6s; 
    transform: scale(0.7); 
    opacity: 1; 
}
.swiper-slide-active { 
    transform: scale(1.2) !important; 
    z-index: 10; 
}
.swiper-slide img { 
    width: 100%; 
    height: 350px; 
    object-fit: contain; 
}
.swiper-slide p { 
    font-weight: 800; 
    color: var(--epson-blue); 
    margin-top: 20px; 
    font-size: 1rem; 
    opacity: 0; 
    transition: 0.4s; 
}
.swiper-slide-active p { 
    opacity: 1; 
}

/* ============================================ */
/* SZOLGÁLTATÁSOK SZEKCIÓ                       */
/* Grid layout a 6 szolgáltatás típusnak        */
/* ============================================ */
.services-section { 
    padding: 80px 20px; 
    max-width: 1100px; 
    margin: 0 auto; 
}
.services-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 60px 40px; 
}
.service-box i { 
    font-size: 2rem; 
    color: var(--epson-blue); 
    margin-bottom: 15px; 
    display: block; 
}
.service-box h3 { 
    font-size: 1.4rem; 
    color: var(--dark-gray); 
    border-left: 4px solid var(--epson-blue); 
    padding-left: 15px; 
    margin-bottom: 10px; 
}
.service-box p { 
    margin: 0; 
    color: #555; 
}

/* ============================================ */
/* MIÉRT TŐLEM SZEKCIÓ - KÉK HÁTTÉR            */
/* Előnyök listája + hibajegy beküldő form      */
/* ============================================ */
.why-us { 
    background: var(--epson-blue); 
    color: #fff; 
    padding: 80px 20px; 
}
.why-grid { 
    max-width: 1100px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 60px; 
}
.feature-item { 
    margin-bottom: 30px; 
    display: flex; 
    gap: 20px; 
    align-items: flex-start; 
}

/* ============================================ */
/* HIBAJEGY KÁRTYA - FEHÉR DOBOZ                */
/* Form a hibabejelentéshez                     */
/* ============================================ */
.report-card { 
    background: #fff; 
    padding: 40px; 
    border-radius: 12px; 
    color: #333; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
    position: relative; 
}
.report-card h3 { 
    margin-top: 0; 
    color: var(--epson-blue); 
    margin-bottom: 5px; 
}
.report-card p.subtitle { 
    font-size: 0.85rem; 
    color: #666; 
    margin-bottom: 20px; 
}

/* ============================================ */
/* HIBATÍPUS GOMBOK - VÁLASZTHATÓ KATEGÓRIÁK    */
/* Kattintható gombok a hibák kiválasztására    */
/* ============================================ */
.error-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 8px; 
    margin-bottom: 15px; 
}
.error-btn { 
    padding: 12px 15px; 
    border: 1px solid #e0e0e0; 
    border-radius: 8px; 
    background: #f8f9fa; 
    cursor: pointer;
    font-size: 0.9rem; 
    font-weight: 600; 
    color: #555; 
    transition: 0.2s; 
    text-align: left; 
    display: flex; 
    align-items: center; 
    gap: 10px;
}
.error-btn i { 
    color: var(--epson-blue); 
    width: 20px; 
    text-align: center; 
}
.error-btn:hover { 
    border-color: var(--accent-blue); 
    background: #f0f5ff; 
}
.error-btn.active { 
    border-color: var(--epson-blue); 
    background: var(--soft-blue); 
    color: var(--epson-blue); 
    box-shadow: inset 0 0 0 1px var(--epson-blue); 
}

/* ============================================ */
/* CSÚSZÓ ANIMÁCIÓJÚ SZEKCIÓK                   */
/* Extra mezők megjelenítése/elrejtése          */
/* ============================================ */
.sliding-section { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.5s ease-out; 
}
.sliding-section.open { 
    max-height: 1200px; 
}

/* ============================================ */
/* INPUT MEZŐK WRAPPER ÉS VALIDÁCIÓS IKONOK     */
/* Valós idejű validáció vizuális visszajelzése */
/* ============================================ */
.input-wrapper { 
    position: relative; 
    margin-bottom: 12px; 
}
.input-wrapper input, 
.input-wrapper textarea { 
    width: 100%; 
    padding: 14px 40px 14px 14px; 
    border: 2px solid #ddd; 
    border-radius: 6px; 
    box-sizing: border-box; 
    font-size: 1rem; 
    font-family: inherit; 
    transition: all 0.2s ease;
}
.input-wrapper input:focus, 
.input-wrapper textarea:focus { 
    outline: none; 
    border-color: var(--accent-blue); 
}
.input-wrapper input.invalid, 
.input-wrapper textarea.invalid { 
    border-color: var(--error-red) !important; 
    background-color: #fff5f5; 
}
.input-wrapper input.valid, 
.input-wrapper textarea.valid { 
    border-color: var(--success-green) !important; 
    background-color: #f0fff4; 
}

/* ============================================ */
/* VALIDÁCIÓS IKONOK - PIPA ÉS X               */
/* Zöld pipa vagy piros X az input mellett      */
/* ============================================ */
.validation-icon {
    position: absolute; 
    right: 14px; 
    top: 50%; 
    transform: translateY(-50%);
    font-size: 1.1rem; 
    opacity: 0; 
    transition: opacity 0.2s ease;
}
.validation-icon.show { 
    opacity: 1; 
}
.validation-icon.error { 
    color: var(--error-red); 
}
.validation-icon.success { 
    color: var(--success-green); 
}

/* ============================================ */
/* HIBAÜZENETEK - PIROS SZÖVEG                 */
/* Segítő szöveg a hibás mezők alatt            */
/* ============================================ */
.helper-text { 
    font-size: 0.8rem; 
    color: var(--error-red); 
    margin: -8px 0 12px 5px; 
    display: none; 
    font-weight: 500; 
    line-height: 1.3;
}

/* ============================================ */
/* CÍM MEZŐK - IRÁNYÍTÓSZÁM ÉS VÁROS           */
/* Flex layout az irányítószám + város sorhoz   */
/* ============================================ */
.address-row { 
    display: flex; 
    gap: 10px; 
}
.address-row .input-wrapper { 
    flex: 1; 
    margin-bottom: 0; 
}
.address-row .input-wrapper:last-child { 
    flex: 2; 
}
.address-row input[id="cust-city"] { 
    background-color: #f8f9fa; 
    font-weight: 600; 
}

/* ============================================ */
/* SUBMIT GOMB - FORM BEKÜLDÉSE                */
/* Kék gomb a hibajegy létrehozásához           */
/* ============================================ */
.report-card button.submit-btn { 
    width: 100%; 
    padding: 18px; 
    background: var(--epson-blue); 
    color: #fff; 
    border: none; 
    font-weight: bold; 
    cursor: pointer; 
    border-radius: 6px; 
    transition: 0.3s; 
    font-size: 1.1rem; 
    margin-top: 10px; 
}
.report-card button.submit-btn:hover { 
    background: var(--accent-blue); 
}
.report-card button.submit-btn:disabled { 
    background: #ccc; 
    cursor: not-allowed; 
}

/* ============================================ */
/* NEMZETKÖZI TELEFONSZÁM INPUT                 */
/* intl-tel-input könyvtár egyedi stílusai      */
/* ============================================ */
.iti { 
    width: 100%; 
}
.input-wrapper .iti { 
    margin-bottom: 0; 
}

/* ============================================ */
/* SIKERES BEKÜLDÉS VISSZAIGAZOLÁS             */
/* Munkalap megjelenítése sikeres form után     */
/* ============================================ */
#ticket-success { 
    display: none; 
    text-align: left; 
    border: 2px dashed var(--epson-blue); 
    padding: 25px; 
    border-radius: 12px; 
    background: #fff; 
}
.work-order-header { 
    text-align: center; 
    margin-bottom: 20px; 
}
.work-order-header i { 
    font-size: 3rem; 
    color: #28a745; 
    margin-bottom: 10px; 
}
.work-order-data { 
    font-size: 0.95rem; 
    border-top: 1px solid #eee; 
    padding-top: 15px; 
}
.work-order-data p { 
    margin: 8px 0; 
    border-bottom: 1px solid #f9f9f9; 
    padding-bottom: 4px; 
}

/* ============================================ */
/* FOOTER - LÁBLÉC                             */
/* Verzió és copyright info                     */
/* ============================================ */
footer { 
    text-align: center; 
    padding: 20px; 
    color: #999; 
    font-size: 0.75rem; 
    background: var(--bg-gray); 
}

/* ============================================ */
/* MOBIL RESZPONZÍV STÍLUSOK                   */
/* Tablet és mobil nézet optimalizálás          */
/* ============================================ */
@media (max-width: 768px) { 
    .why-grid { 
        grid-template-columns: 1fr; 
    } 
    .address-row { 
        flex-direction: column; 
        gap: 0; 
    } 
}