/* ===== Global Reset ===== */
       * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
       }
       
       html {
         scroll-behavior: smooth;
         font-size: 16px;
       }
       
       body {
         font-family: "Segoe UI", Arial, sans-serif;
         background-color: #0e4a6b;
         color: #1f2937;
         line-height: 1.6;
       }
       
       /* ===== Layout Containers ===== */
       .container {
         max-width: 1200px;
         margin: auto;
         padding: 0 20px;
       }
       
       section {
         padding: 60px 0;
       }
       
       /* ===== Hero ===== */
       .hero {
         background: linear-gradient(135deg, #ffffff, #0e4a6b);
         color: #ffffff;
         text-align: center;
         padding: 20px 20px;
       }
       
       .hero h1 {
         font-size: 2.6rem;
         margin-bottom: 12px;
       }
       
       .hero p {
         font-size: 1.2rem;
         opacity: 0.9;
       }
       
       /* ===== Buttons ===== */
       .btn,
       a.btn {
         display: inline-block;
         padding: 14px 30px;
         border-radius: 50px;
         background: #2563eb;
         color: #fff;
         font-weight: bold;
         text-decoration: none;
         transition: all .2s ease;
       }
       
       .btn:hover,
       a.btn:hover {
         background: #1e3a8a;
         transform: translateY(-2px);
         text-decoration: none;
       }
       
       /* ===== Service Grid ===== */
        .service-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr); /* 3 oszlop desktopon */
          gap: 28px;
        }
        
        /* Mobil: 2 oszlop › 3x2 elrendezés */
        @media (max-width: 768px) {
          .service-grid {
            grid-template-columns: repeat(2, 1fr); /* 2 oszlop mobilon */
          }
        }
       
      .service-card {
        background: #ffffff;
        border-radius: 5px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }
      
      /* ez már külön szabály legyen */
      .service-card .icon svg {
        width: 28px;
        height: 28px;
        display: block;
      }
      .service-card .icon svg * {
        fill: none !important;
        stroke: currentColor;
      }
      


/* desktop arány – majdnem négyzet */
aspect-ratio: 5/ 3;
max-width: 400px;
margin: 0 auto;


display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.service-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(59,130,246,0.05));
opacity: 0;
transition: opacity 0.25s ease;
}


.service-card:hover::before {
opacity: 1;
}


.service-card:hover {
transform: translateY(-8px) scale(1.03);
box-shadow: 0 22px 50px rgba(37,99,235,0.25);
text-decoration:none;
}       
       .service-card h3 {
margin-top: 14px;
font-size: 1.05rem;
font-weight: 600;
color: #1e3a8a;
}

.packaging {
  background: #f9fafb;
  border-radius: 24px;
  margin-top: 80px;
}

.packaging .subtitle {
  max-width: 720px;
  margin: 16px auto 40px;
  color: #4b5563;
  font-size: 1rem;
}

.packaging-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.pack-card {
  background: #ffffff;
  padding: 28px 24px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  text-align: left;
}

.pack-card h3 {
  margin-bottom: 10px;
  font-size: 1.05rem;
  color: #111827;
}

.pack-card p {
  color: #374151;
  font-size: 0.95rem;
  line-height: 1.5;
}

.pack-card.warning {
  border-left: 5px solid #dc2626;
  background: #fff5f5;
}


@media (max-width: 1024px) {
.service-card {
aspect-ratio: auto; /* tablet/mobilon ne erőltessük */
max-width: none;
}
}

       
       /* Icon Style (for service cards) */
       .service-card .icon {
         display: block;
         margin: 0 auto 16px;
         width: 56px;
         height: 56px;
       }
       
       .service-card .icon svg {
         width: 100%;
         height: 100%;
         stroke: #2563eb;
         fill: none;
         stroke-width: 2;
       }
       
       .service-card:hover .icon svg {
                transform: scale(1.5);
                transition: transform .2s ease;
              }
       
       /* ===== Section Headings ===== */
       h2 {
         font-size: 2rem;
         text-align: center;
         margin-bottom: 18px;
         color: #2563eb;
       }
       
       /* ===== Service Sections ===== */
      .service-section {
        max-width: 720px;              /* desktopon keskenyebb, fókuszált */
        margin: 80px auto;             /* középre igazítás */
        padding: 64px 24px;
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 16px 40px rgba(0,0,0,0.10);
        scroll-margin-top: 60px;       /* smooth scroll header-kompatibilis */
      }
      
       
       .service-section p {
         margin-bottom: 24px;
         color: #4b5563;
       }
       /*.service-section:nth-child(even) {
         background: linear-gradient(135deg, #f9fafb, #ffffff);
       }*/
       .service-section {
         animation: fadeInUp 0.4s ease;
       }
       
       @keyframes fadeInUp {
         from {
           opacity: 0;
           transform: translateY(20px);
         }
         to {
           opacity: 1;
           transform: translateY(0);
         }
       }
       
       
       /* ===== Responsive ===== */
       @media (max-width: 768px) {
         html { font-size: 15px; }
       
         .hero {
           padding: 60px 20px;
         }
       
         .service-section {
           padding: 40px 16px;
         }
       }
       @media (max-width: 768px) {
         .service-section {
           max-width: 100%;
           margin: 48px 16px;
           padding: 40px 16px;
           border-radius: 16px;
         }
       }
       .intl-choice {
         display: flex;
         gap: 16px;
         margin: 24px 0;
       }
       
       .intl-btn {
         padding: 12px 24px;
         border-radius: 999px;
         border: 2px solid #2563eb;
         background: #fff;
         color: #2563eb;
         font-weight: 600;
         cursor: pointer;
       }
       
       .intl-btn.active {
         background: linear-gradient(135deg, #2563eb, #1e40af);
         color: #fff;
       }
       
       .intl-form {
         scroll-margin-top: 400px;
       }
       
       
     /* ================================
        PALETTA FORM – TISZTA, STABIL
     ================================ */
     
     /* maga a form */
     #service-paletta .paletta-form{
       margin-top: 16px;
     }
     
     /* kártya elrendezés */
     #service-paletta .form-card{
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 24px;
       background: #ffffff;
       padding: 24px;
       border-radius: 18px;
       box-shadow: 0 12px 28px rgba(0,0,0,0.08);
     }
     
     /* két oszlop */
     #service-paletta .col-50{
       display: flex;
       flex-direction: column;
       gap: 14px;
     }
     
     /* inputok */
     #service-paletta input,
     #service-paletta select{
       width: 100%;
       padding: 14px 16px;
       border-radius: 12px;
       border: 1px solid #e5e7eb;
       background: #f9fafb;
       font-size: 15px;
       color: #111827;
     }
     
     #service-paletta input::placeholder{
       color: #6b7280;
     }
     
     /* fókusz */
     #service-paletta input:focus,
     #service-paletta select:focus{
       outline: none;
       border-color: #2563eb;
       background: #ffffff;
     }
     
     /* gomb */
     #service-paletta .btn{
       margin-top: 20px;
       padding: 14px 28px;
       border-radius: 999px;
       font-weight: 600;
     }
     
     /* mobil */
     @media (max-width: 768px){
       #service-paletta .form-card{
         grid-template-columns: 1fr;
       }
     }
     /* Paletta form csak akkor látszódjon, ha a szekció nyitva van */
     #service-paletta .paletta-form{ display:none; }
     
     #service-paletta.is-open .paletta-form{
       display:block !important; /* csak itt ütjük át a rejtést */
     }
     
     /* Layout */
     #service-paletta.is-open .form-card{
       display:grid;
       grid-template-columns:1fr 1fr;
       gap:24px;
       background:#fff;
       padding:24px;
       border-radius:18px;
       box-shadow:0 12px 28px rgba(0,0,0,0.08);
       margin-top:16px;
     }
     
     #service-paletta.is-open .col-50{
       display:flex;
       flex-direction:column;
       gap:14px;
     }
     
     #service-paletta.is-open input,
     #service-paletta.is-open select{
       width:100%;
       padding:14px 16px;
       border-radius:12px;
       border:1px solid #e5e7eb;
       background:#f9fafb;
     }
     
     @media (max-width:768px){
       #service-paletta.is-open .form-card{ grid-template-columns:1fr; }
     }
     #service-paletta .form-card{
       display:grid;
       grid-template-columns:1fr 1fr;
       gap:24px;
       background:#fff;
       padding:24px;
       border-radius:18px;
       box-shadow:0 12px 28px rgba(0,0,0,0.08);
       margin-top:16px;
     }
     #service-paletta .col-50{display:flex;flex-direction:column;gap:14px;}
     #service-paletta input,#service-paletta select{
       width:100%;
       padding:14px 16px;
       border-radius:12px;
       border:1px solid #e5e7eb;
       background:#f9fafb;
     }
     @media (max-width:768px){#service-paletta .form-card{grid-template-columns:1fr;}}
     /* ================================
        PALETTA / msform – SZÉPÍTÉS
     ================================ */
     
     #service-paletta #msform{
       margin-top: 18px;
     }
     
     #service-paletta #msform fieldset{
       border: 0;
       padding: 0;
       margin: 0;
     }
     
     /* kártya */
     #service-paletta #msform .form-card{
       background: #ffffff;
       border-radius: 18px;
       padding: 24px;
       box-shadow: 0 12px 28px rgba(0,0,0,0.08);
     }
     
     /* cím */
     #service-paletta #msform .fs-title{
       margin: 0 0 14px 0;
       font-size: 1.25rem;
       font-weight: 700;
       color: #111827;
     }
     
     /* alcímek (a sok h4/h5) */
     #service-paletta #msform h4{
       margin: 14px 0 8px 0;
       font-size: 1rem;
       font-weight: 700;
       color: #111827;
     }
     #service-paletta #msform h5{
       margin: 12px 0 6px 0;
       font-size: 0.95rem;
       font-weight: 700;
       color: #111827;
     }
     
     /* layout: col-100 + row */
     #service-paletta #msform .col-100{
       display: flex;
       flex-direction: column;
       gap: 14px;
     }
     
     /* a te row/col-50 párosod szép rácsba */
     #service-paletta #msform .row{
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 16px;
       margin: 0;
     }
     #service-paletta #msform .col-50{
       width: 100%;
     }
     
     /* inputok + selectek (inline style fölé is menjen) */
     #service-paletta #msform input[type="text"],
     #service-paletta #msform select{
       width: 100% !important;
       max-width: 100% !important;
       padding: 14px 16px;
       border-radius: 12px;
       border: 1px solid #e5e7eb;
       background: #f9fafb;
       color: #111827;
       font-size: 15px;
       box-sizing: border-box;
     }
     
     /* fókusz */
     #service-paletta #msform input[type="text"]:focus,
     #service-paletta #msform select:focus{
       outline: none;
       background: #ffffff;
       border-color: #2563eb;
     }
     
     /* rádiók: szebb sorban */
     #service-paletta #msform .radio{
       margin-right: 8px;
     }
     #service-paletta #msform input[type="radio"]{
       margin: 0 8px 0 0;
     }
     #service-paletta #msform .radio,
     #service-paletta #msform input[type="radio"]{
       vertical-align: middle;
     }
     #service-paletta #msform label{
       margin: 0;
     }
     
     /* rádió blokk (dij + uvv) kissé “chip” jelleg */
     #service-paletta #msform [name="dij"]{
       transform: translateY(1px);
     }
     
     #service-paletta #msform #uvv{
       margin-top: 10px;
       padding: 14px;
       border-radius: 12px;
       background: #f9fafb;
       border: 1px solid #e5e7eb;
     }
     
     /* submit gomb */
     #service-paletta #msform .action-button,
     #service-paletta #msform .ccalc{
       display: inline-block;
       margin-top: 16px;
       padding: 14px 26px;
       border-radius: 999px;
       border: 0;
       cursor: pointer;
       font-weight: 700;
     }
     
     /* mobil */
     @media (max-width: 768px){
       #service-paletta #msform .row{
         grid-template-columns: 1fr;
       }
     }
     /* ===== PALETTA: form-card ne két oszlopba törjön ===== */
     #service-paletta #msform .form-card{
       display: block !important;      /* ez a lényeg */
       width: 100% !important;
     }
     
     #service-paletta #msform .fs-title{
       text-align: left;
       margin-bottom: 16px;
     }
     
     /* a "Válassz..." rész ne legyen keskeny */
     #service-paletta #msform .col-100{
       width: 100% !important;
       max-width: 100% !important;
     }
     
     /* a select ne legyen 300px-es, töltse ki a sort */
     #service-paletta #msform select{
       width: 100% !important;
       max-width: 100% !important;
     }
     #service-paletta #egyeb{ display:none; }
     
     /* Service kártyák címei – vizuálisan h3 méret, SEO szempontból h2 */
     .service-card h2 {
       font-size: 1.05rem;      /* kb. h3 méret */
       line-height: 1.35;
       margin: 0.6rem 0 0.4rem;
       font-weight: 600;
     }
     
     /* Mobilon picit kisebb */
     @media (max-width: 768px) {
       .service-card h2 {
         font-size: 1rem;
       }
     }
     
         /* =========================
            PALETTA: kényszer full width (grid/flex/max-width ellen)
            ========================= */
         
         /* maga a szekció is */
         #service-paletta{
           width: 100% !important;
           /*max-width: none !important;*/
           display: block !important;
         
           /* ha valami gridben fél oszlopra teszi */
           grid-column: 1 / -1 !important;
         
           /* ha valami flexben 50%-ot ad */
           flex: 0 0 100% !important;
         }
         
         /* minden köztes wrapper */
         #service-paletta #paletta_form,
         #service-paletta #paletta_form fieldset,
         #service-paletta #paletta_form .paletta-ui,
         #service-paletta #paletta_form .form-card,
         #service-paletta #paletta_form .col-100{
           width: 100% !important;
           /*max-width: none !important;*/
           flex: 0 0 100% !important;
           grid-column: 1 / -1 !important;
         }
         
         /* ha középre húzza “kártyaként” */
         #service-paletta #paletta_form .form-card{
           margin-left: 0 !important;
           margin-right: 0 !important;
         }
     /* =========================
        PALETTA – szekció full width, form-kártya középen
        ========================= */
     
     /* a szekciót engedjük teljes szélességre (ne legyen fél oszlop) */
     #service-paletta{
       width: 100% !important;
       grid-column: 1 / -1 !important;
       flex: 0 0 100% !important;
     }
     
     /* a belső UI is lehet 100% */
     #service-paletta #paletta_form,
     #service-paletta #paletta_form fieldset,
     #service-paletta #paletta_form .paletta-ui{
       width: 100% !important;
     }
     
     /* VISZONT a kártya legyen "szép", középen */
     #service-paletta #paletta_form .form-card{
       width: 100% !important;        /* mobilon töltsön ki */
       max-width: 760px !important;   /* <-- ezt állítsd: 760 / 900 / 1100 ízlés szerint */
       margin: 0 auto !important;     /* középre */
     }
     
     /* ha a col-100/row valamiért korlátozna */
     #service-paletta #paletta_form .col-100{
       width: 100% !important;
       max-width: 100% !important;
     }
     /* =========================
        PALETTA – tipográfia rendbetétel
        ========================= */
     
     /* a szekció főcím legyen kisebb és közelebb a tartalomhoz */
     #service-paletta > h2{
       font-size: 28px !important;
       line-height: 1.2 !important;
       margin: 10px 0 6px !important;
     }
     
     /* a szekció rövid leírása */
     #service-paletta > p{
       margin: 0 0 14px !important;
     }
     
     /* a kártyán belüli nagy cím (fs-title) jelenleg túl nagy */
     #service-paletta .form-card .fs-title{
       font-size: 20px !important;
       line-height: 1.2 !important;
       margin: 0 0 10px !important;
       text-align: left !important;   /* sokkal “UI-sabb”, mint középen */
     }
     
     /* ha a form-card-ban van extra nagy padding/felesleges tér */
     #service-paletta .form-card{
       padding-top: 18px !important;
     }
     /* =========================
        EGYSÉGES SERVICE FORM STÍLUS
        ========================= */
     
     /* minden service szekció tartalma */
     .service-section{
       width: 100%;
     }
     
     /* közös kártya (standard, xxl, gumi, paletta, international) */
     .service-section .form-card,
     .service-section form.form-inline,
     .service-section form{
       width: 100%;
       max-width: 860px;              /* ‹ EGYSÉGES SZÉLESSÉG */
       margin: 0 auto;                /* középre */
       padding: 22px 24px;
       background: #fff;
       border-radius: 12px;
       box-shadow: 0 8px 24px rgba(0,0,0,0.06);
       box-sizing: border-box;
     }
     
     /* címek a kártyán belül */
     .service-section .fs-title,
     .service-section h2,
     .service-section h3{
       font-size: 20px;
       line-height: 1.3;
       margin: 0 0 12px;
       text-align: left;
     }
     
     /* alcím / leírás */
     .service-section p{
       margin: 0 0 16px;
       color: #555;
     }
     
     /* inputok egységes kinézete */
     .service-section input,
     .service-section select,
     .service-section textarea{
       width: 100%;
       padding: 10px 12px;
       border-radius: 8px;
       border: 1px solid #ddd;
       font-size: 14px;
     }
     
     /* gomb */
     .service-section .action-button,
     .service-section button[type="submit"]{
       margin-top: 16px;
       padding: 12px 18px;
       border-radius: 10px;
       font-size: 15px;
       font-weight: 600;
     }
     /* =========================
        EGYSÉGES INPUT LOOK – inline stílusok felülírása
        ========================= */
     
     .service-section input:not([type="radio"]):not([type="checkbox"]),
     .service-section select,
     .service-section textarea{
       width: 100% !important;
       max-width: 100% !important;
     
       border: 1px solid #ddd !important;
       border-bottom: 1px solid #ddd !important; /* inline border-bottom kiváltása */
       background: #fff !important;
     
       padding: 10px 12px !important;
       border-radius: 8px !important;
       box-sizing: border-box !important;
     
       outline: none;
     }
     
     /* fókusz */
     .service-section input:not([type="radio"]):not([type="checkbox"]):focus,
     .service-section select:focus,
     .service-section textarea:focus{
       border-color: #bbb !important;
     }
     
     /* radio/checkbox maradjon “natúr” */
     .service-section input[type="radio"],
     .service-section input[type="checkbox"]{
       width: auto !important;
     }
     /* =========================
        FORM LAYOUT – 2 oszlop desktopon
        ========================= */
     .service-section form > div[style*="width:100%"]{
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 12px 16px;
     }
     
     /* a teljes szélességű blokkok menjenek át 2 oszlopon */
     .service-section form > div[style*="width:100%"] > div,
     .service-section form > div[style*="width:100%"] > p,
     .service-section form > div[style*="width:100%"] > h6,
     .service-section form > div[style*="width:100%"] > hr,
     .service-section form > div[style*="width:100%"] > input[type="submit"]{
       grid-column: 1 / -1;
     }
     
     /* mobilon 1 oszlop */
     @media (max-width: 768px){
       .service-section form > div[style*="width:100%"]{
         grid-template-columns: 1fr;
       }
     }
    
    /* =========================
       SUBMIT GOMB – HELYES UX
       ========================= */
    
    /* ALAPÁLLAPOT */
    .service-section input[type="submit"],
    .service-section button[type="submit"]{
      background-color: #fcba03 !important; /* narancs */
      color: #000 !important;
    
      border: none !important;
      border-radius: 10px !important;
    
      padding: 12px 18px !important;
      font-size: 15px !important;
      font-weight: 600 !important;
    
      opacity: 1 !important;
      visibility: visible !important;
    
      transition: background-color 0.15s ease, box-shadow 0.15s ease;
      cursor: pointer !important;
    }
    
    /* HOVER */
    .service-section input[type="submit"]:hover,
    .service-section button[type="submit"]:hover{
      background-color: #e0a702 !important; /* sötétebb narancs */
    }
    
    /* FÓKUSZ (billentyűzet) */
    .service-section input[type="submit"]:focus-visible,
    .service-section button[type="submit"]:focus-visible{
      outline: none;
      box-shadow: 0 0 0 3px rgba(252,186,3,0.35);
    }
    /* FORCE SUBMIT BUTTON VISIBILITY – LAST OVERRIDE */
    body .service-section input[type="submit"],
    body .service-section button[type="submit"],
    body input[type="submit"].btn,
    body button[type="submit"].btn,
    body .btn.btn-primary,
    body input.btn.btn-primary{
      background: #fcba03 !important;
      background-color: #fcba03 !important;
      color: #000 !important;
    
      border: 0 !important;
      border-radius: 10px !important;
    
      padding: 12px 18px !important;
      font-weight: 700 !important;
    
      opacity: 1 !important;
      visibility: visible !important;
      filter: none !important;
    
      transition: background-color .15s ease !important;
    }
    
    body .service-section input[type="submit"]:hover,
    body .service-section button[type="submit"]:hover,
    body .btn.btn-primary:hover,
    body input.btn.btn-primary:hover{
      background: #e0a702 !important;
      background-color: #e0a702 !important;
    }
    /* SUBMIT – célzott override a VALÓDI classokra */
    .service-section input[type="submit"],
    .service-section button[type="submit"]{
      border-radius: 10px;
      padding: 12px 18px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
    }
    
    .service-section input[type="submit"]:hover,
    .service-section button[type="submit"]:hover{
      background-color: #e0a702;
    }
    /* =========================
       SUBMIT – DISABLED ÁLLAPOT
       ========================= */
    .service-section input[type="submit"]:disabled,
    .service-section button[type="submit"]:disabled{
      background-color: #ddd !important;
      color: #777 !important;
      cursor: not-allowed !important;
      box-shadow: none !important;
    }
    /* =========================
       FORM VALIDÁCIÓ – HIBÁS MEZŐ
       ========================= */
    .service-section input:invalid,
    .service-section select:invalid,
    .service-section textarea:invalid{
      border-color: #e74c3c !important;
      background-color: #fff7f7 !important;
    }
    /* =========================
       FORM VALIDÁCIÓ – VALÓS UX
       ========================= */
    .service-section input:invalid,
    .service-section select:invalid,
    .service-section textarea:invalid{
      border-color: #e74c3c;
      background-color: #fff7f7;
    }
    
    /* de csak akkor, ha a user már próbált submitelni */
    .service-section form:not(.was-submitted) input:invalid,
    .service-section form:not(.was-submitted) select:invalid,
    .service-section form:not(.was-submitted) textarea:invalid{
      border-color: #ddd;
      background-color: #fff;
    }
    /* =========================
       FORM HIBA – KÉZI KEZELÉS
       ========================= */
    .service-section .is-invalid{
      border-color: #e74c3c !important;
      background-color: #fff7f7 !important;
    }
    /* UX – hibás mező kiemelése (JS adja rá az osztályt) */
    .service-section .is-invalid{
      border-color:#e74c3c !important;
      background-color:#fff7f7 !important;
    }
    
    /* ha már javította */
    .service-section .is-valid{
      border-color:#2ecc71 !important;
    }
    /* INVALID mezők – inline border:none ellen is látszódjon */
    .service-section input.is-invalid,
    .service-section select.is-invalid,
    .service-section textarea.is-invalid{
      border-bottom: 2px solid #e74c3c !important;   /* ez fog látszani nálad */
      box-shadow: 0 2px 0 0 #e74c3c !important;      /* extra, hogy tuti észrevehető legyen */
      background-color: #fff7f7 !important;
    }
    
    /* opcionális: ha fókuszba kerül a hibás mező, még erősebb legyen */
    .service-section input.is-invalid:focus,
    .service-section select.is-invalid:focus,
    .service-section textarea.is-invalid:focus{
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(231,76,60,.15), 0 2px 0 0 #e74c3c !important;
    }
    /* =========================
       INLINE HIBAÜZENET
       ========================= */
   .service-section .field-error{
     display: none;
     width: 100%;
   }
   .service-section .field-error.active{
     display: block;
   }
   /* Inline hibaüzenet – finomabb */
   .service-section .field-error{
     display:none;
     width:100%;
     margin:6px 0 14px;      /* legyen levegő alatta */
     font-size:12px;
     line-height:1.2;
     font-weight:400;        /* ne legyen félkövér */
     color:#d93025;
     opacity:.95;
   }
   
   .service-section .field-error.active{ display:block; }
   
   /* Ha a piros keret túl erős, finomítsuk */
   .service-section .is-invalid{
     box-shadow:none !important;
   }
   /* Inline hibaüzenet: NE törje szét a 2 oszlopot */
   .service-section .field-error{
     display:none;
     width:auto;              /* <-- ez a lényeg (ne 100%) */
     min-width:200px;         /* igazodjon az inputokhoz */
     max-width:220px;         /* nálad jellemzően 200-220px */
     margin:6px 12px 14px 0;  /* jobbra hagyjunk helyet, mint a mr-sm-2 */
     font-size:12px;
     line-height:1.2;
     font-weight:400;
     color:#d93025;
   }
   
   .service-section .field-error.active{ display:block; }
   
   /* a piros keret maradhat, shadow ne rondítson */
   .service-section .is-invalid{ box-shadow:none !important; }
   /* Ha egy input 100%-os (pl. select), a hiba is lehessen szélesebb */
   .service-section .col-50 .field-error,
   .service-section .col-100 .field-error{
     max-width:100%;
   }
   /* 2 oszlopos elrendezés MOBILON is a service formoknál */
   .service-section form{
     display:flex !important;
     flex-wrap:wrap !important;
     align-items:flex-start;
     gap:12px;
   }
   
   /* minden input/select/submit alapból 2 oszlop */
   .service-section form input,
   .service-section form select,
   .service-section form textarea{
     flex:0 0 calc(50% - 6px) !important;  /* 2 oszlop */
     max-width:calc(50% - 6px) !important;
   }
   
   /* A hibaüzenet ugyanazt a cellát foglalja, mint az input */
   .service-section form .field-error{
     display:none;
     flex:0 0 calc(50% - 6px) !important;
     max-width:calc(50% - 6px) !important;
     margin:0 !important;
     font-size:12px;
     line-height:1.2;
     font-weight:400;
     color:#d93025;
   }
   .service-section form .field-error.active{ display:block; }
   
   /* Teljes szélességű elemek (pl. gomb, címek, hosszabb blokkok) */
   .service-section form input[type="submit"],
   .service-section form button[type="submit"],
   .service-section form .col-100,
   .service-section form .form-card,
   .service-section form fieldset{
     flex:0 0 100% !important;
     max-width:100% !important;
   }
   
   /* Nemzetközi (széles select) – maradhat full width ha akarod */
   #service-international form select{
     flex:0 0 100% !important;
     max-width:100% !important;
   }
   /* A form belső 100%-os wrapperét tegyük flex konténerré */
   .service-section form.form-inline > div[style*="width:100%"]{
     display:flex !important;
     flex-wrap:wrap !important;
     align-items:flex-start;
     gap:12px;
   }
   
   /* A mezők 2 oszlop */
   .service-section form.form-inline > div[style*="width:100%"] > input,
   .service-section form.form-inline > div[style*="width:100%"] > select,
   .service-section form.form-inline > div[style*="width:100%"] > textarea{
     flex:0 0 calc(50% - 6px) !important;
     max-width:calc(50% - 6px) !important;
     margin:0 !important; /* bootstrap mb-2/mr-sm-2 helyett */
   }
   
   /* Inline hibaüzenet is ugyanekkora cella legyen */
   .service-section form.form-inline > div[style*="width:100%"] > .field-error{
     display:none;
     flex:0 0 calc(50% - 6px) !important;
     max-width:calc(50% - 6px) !important;
     margin:0 !important;
     font-size:12px;
     line-height:1.2;
     color:#d93025;
   }
   .service-section form.form-inline > div[style*="width:100%"] > .field-error.active{
     display:block;
   }
   
   /* Full széles elemek */
   .service-section form.form-inline > div[style*="width:100%"] > input[type="submit"],
   .service-section form.form-inline > div[style*="width:100%"] > button[type="submit"],
   .service-section form.form-inline > div[style*="width:100%"] > h6,
   .service-section form.form-inline > div[style*="width:100%"] > p,
   .service-section form.form-inline > div[style*="width:100%"] > hr,
   .service-section form.form-inline > div[style*="width:100%"] > div{
     flex:0 0 100% !important;
     max-width:100% !important;
   }
   /* A belső wrapper legyen a layout konténer */
   .service-section form.form-inline > div[style*="width:100%"]{
     display:flex !important;
     flex-wrap:wrap !important;
     align-items:flex-start;
     gap:12px;
   }
   
   /* Csak az input/select/textarea menjen 2 oszlopba */
   .service-section form.form-inline > div[style*="width:100%"] > input:not([type="submit"]),
   .service-section form.form-inline > div[style*="width:100%"] > select,
   .service-section form.form-inline > div[style*="width:100%"] > textarea{
     flex:0 0 calc(50% - 6px) !important;
     max-width:calc(50% - 6px) !important;
     margin:0 !important;
   }
   
   /* Submit maradjon full width */
   .service-section form.form-inline > div[style*="width:100%"] > input[type="submit"],
   .service-section form.form-inline > div[style*="width:100%"] > button[type="submit"]{
     flex:0 0 100% !important;
     max-width:100% !important;
   }
   
   /* Hibaüzenet: lehet alatta (nem muszáj 100%) */
   .service-section form.form-inline > div[style*="width:100%"] > .field-error{
     display:none;
     flex:0 0 calc(50% - 6px) !important;   /* így “az oszlophoz igazodik” */
     max-width:calc(50% - 6px) !important;
     margin:-6px 0 0 0 !important;
     font-size:12px;
     line-height:1.2;
     color:#d93025;
   }
   .service-section form.form-inline > div[style*="width:100%"] > .field-error.active{
     display:block;
   }
   /* 1) a form közvetlen belső wrapper div legyen flex */
   .service-section form.form-inline > div{
     display:flex !important;
     flex-wrap:wrap !important;
     align-items:flex-start !important;
     gap:12px !important;
   }
   
   /* 2) MINDEN input/select/textarea két oszlop (kivéve submit) */
   .service-section form.form-inline > div > input:not([type="submit"]),
   .service-section form.form-inline > div > select,
   .service-section form.form-inline > div > textarea{
     box-sizing:border-box !important;
     flex:0 0 calc(50% - 6px) !important;
     max-width:calc(50% - 6px) !important;
   
     /* EZ A LÉNYEG: felülírja az inline width:200px-et */
     width:100% !important;
     margin:0 !important;
   }
   
   /* 3) Submit maradjon teljes szélesség */
   .service-section form.form-inline > div > input[type="submit"],
   .service-section form.form-inline > div > button[type="submit"]{
     flex:0 0 100% !important;
     max-width:100% !important;
     width:100% !important;
   }
   
   /* 4) A blokkos div-ek (utánvét/biztosítás stb) maradjanak full width */
   .service-section form.form-inline > div > div{
     flex:0 0 100% !important;
     max-width:100% !important;
   }
   /* 2 oszlopos mező wrapper */
   .service-section .field-wrap{
     box-sizing: border-box;
     flex: 0 0 calc(50% - 6px);
     max-width: calc(50% - 6px);
     width: calc(50% - 6px);
   }
   
   /* wrapperen belül az input töltse ki */
   .service-section .field-wrap input:not([type="submit"]),
   .service-section .field-wrap select,
   .service-section .field-wrap textarea{
     width: 100% !important;
     max-width: 100% !important;
     box-sizing: border-box;
   }
   
   /* hibaüzenet mindig blokk, input alatt */
   .service-section .field-wrap .field-error,
   .service-section .field-wrap .invalid-feedback,
   .service-section .field-wrap .error-msg{
     display: block;
     margin-top: 6px;
   }
   
   /* submit full width */
   .service-section form .field-wrap--full{
     flex: 0 0 100%;
     max-width: 100%;
     width: 100%;
   }
   
   /* ===== VALID / INVALID UI ===== */
   
   .field-wrap { position: relative; }
   
   /* piros keret már van nálad: .is-invalid (ha nincs, tedd be) */
   .is-invalid {
     border: 2px solid #e53935 !important;
     outline: none !important;
   }
   
   /* zöld keret valid mezőnél */
   .is-valid {
     border: 2px solid #2e7d32 !important;
     outline: none !important;
   }
   
   /* zöld pipa a mező jobb oldalán */
   .is-valid {
     padding-right: 44px !important; /* legyen hely a pipának */
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232e7d32'%3E%3Cpath d='M9 16.17 4.83 12 3.41 13.41 9 19l12-12-1.41-1.41z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-size: 20px 20px;
     background-position: right 14px center;
   }
   
   /* ha invalid, ne legyen pipa */
   .is-invalid {
     background-image: none !important;
   }
   
   /* a hibaszöveg (ha még kell) */
   .field-error { display:none; font-size: 13px; margin-top: 6px; color:#e53935; }
   .field-error.active { display:block; }
   /* ===== Inline error + valid pipa (WRAPPER alapon) ===== */
   
   .field-wrap{
     position: relative;
   }
   
   /* hibaüzenet */
   .field-error{ display:none; font-size:13px; margin-top:6px; color:#e53935; }
   .field-error.active{ display:block; }
   
   /* piros/zöld keret a mezőn */
   .is-invalid{ border:2px solid #e53935 !important; outline:none !important; }
   .is-valid{ border:2px solid #2e7d32 !important; outline:none !important; }
   
   /* zöld pipa a wrapperben (nem háttérkép az inputon!) */
   .field-wrap.field-ok::after{
     content:"";
     position:absolute;
     right:14px;
     top:50%;
     width:20px;
     height:20px;
     transform:translateY(-50%);
     background-repeat:no-repeat;
     background-size:20px 20px;
     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232e7d32'%3E%3Cpath d='M9 16.17 4.83 12 3.41 13.41 9 19l12-12-1.41-1.41z'/%3E%3C/svg%3E");
     pointer-events:none;
   }
   
   /* legyen hely a pipának */
   .field-wrap.field-ok input,
   .field-wrap.field-ok select,
   .field-wrap.field-ok textarea{
     padding-right:44px !important;
   }
   /* Inline hibaüzenet */
   .field-error{
     display:none;
     margin-top:6px;
     font-size:13px;
     line-height:1.25;
     color:#e53935;
   }
   .field-error.active{ display:block; }
   
   /* Piros/zöld keret */
   .is-invalid{ border:2px solid #e53935 !important; outline:none !important; }
   .is-valid{ border:2px solid #2e7d32 !important; outline:none !important; }
   
   /* Zöld pipa: NE háttérkép az inputon (azt sok CSS felülírja),
      hanem a mező szülő "oszlopán" jelenjen meg */
   .col-50, .col-100{ position:relative; }
   
   .col-50.field-ok::after,
   .col-100.field-ok::after{
     content:"";
     position:absolute;
     right:14px;
     top:38px;              /* ha máshol van a mező teteje, ezt finomíthatod */
     width:20px;
     height:20px;
     background-repeat:no-repeat;
     background-size:20px 20px;
     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232e7d32'%3E%3Cpath d='M9 16.17 4.83 12 3.41 13.41 9 19l12-12-1.41-1.41z'/%3E%3C/svg%3E");
     pointer-events:none;
   }
   /* ====== STANDARD form: 2 oszlopos elrendezés (wrapperrel) ====== */
   .service-section .form-inline > div[style*="width:100%"]{
     display:flex;
     flex-wrap:wrap;
     gap:14px;
     align-items:flex-start;
   }
   
   /* Mező wrapper (JS fogja létrehozni) */
   .service-section .form-inline .field-col{
     flex:1 1 calc(50% - 14px);
     min-width:260px;           /* hogy mobilon szépen essen 1 oszlopra */
     position:relative;
   }
   
   /* Inputok a wrapperen belül 100% szélesek legyenek (felülírja az inline width-öt is) */
   .service-section .form-inline .field-col > input,
   .service-section .form-inline .field-col > select,
   .service-section .form-inline .field-col > textarea{
     width:100% !important;
   }
   
   /* A blokkos részek (UV rész, biztosítás, rádiók) maradjanak full width */
   .service-section .form-inline > div[style*="width:100%"] > div{
     flex:1 1 100%;
   }
   
   /* Submit is full width */
   .service-section .form-inline input[type="submit"],
   .service-section .form-inline button[type="submit"]{
     flex:1 1 100%;
     width:100% !important;
   }
   
   /* Inline hiba */
   .field-error{
     display:none;
     margin-top:6px;
     font-size:13px;
     line-height:1.25;
     color:#e53935;
   }
   .field-error.active{ display:block; }
   
   /* Piros / zöld keret */
   .is-invalid{ border:2px solid #e53935 !important; outline:none !important; }
   .is-valid{ border:2px solid #2e7d32 !important; outline:none !important; }
   
   /* Zöld pipa a wrapperen */
   .field-col.field-ok::after{
     content:"";
     position:absolute;
     right:12px;
     top:12px;
     width:20px;
     height:20px;
     background-repeat:no-repeat;
     background-size:20px 20px;
     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232e7d32'%3E%3Cpath d='M9 16.17 4.83 12 3.41 13.41 9 19l12-12-1.41-1.41z'/%3E%3C/svg%3E");
     pointer-events:none;
   }
   /* Submit loading állapot */
   .is-loading { cursor: not-allowed; opacity: .8; }
   /* ===== Result pages (function.php / function2.php) ===== */
   .result-wrap{
     max-width: 980px;
     margin: 0 auto;
     padding: 18px 12px;
   }
   
   .result-card{
     border-radius: 18px;
     padding: 18px;
   }
   
   .result-title{
     margin: 0 0 10px 0;
     font-size: 22px;
     line-height: 1.2;
   }
   
   .result-lead{
     margin: 0 0 14px 0;
     opacity: .9;
   }
   
   .result-details{
     margin-top: 10px;
   }
   
   .result-actions{
     margin-top: 16px;
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
   }
   
   /* státusz színezés finoman */
   .result--success{ border: 1px solid rgba(0,0,0,.08); }
   .result--info{    border: 1px solid rgba(0,0,0,.08); }
   .result--error{   border: 1px solid rgba(255,80,80,.35); }
   
   /* részletekhez egyszerű táblázat */
   .result-table{
     width: 100%;
     border-collapse: collapse;
     margin-top: 10px;
   }
   .result-table td{
     padding: 10px 6px;
     border-bottom: 1px solid rgba(0,0,0,.08);
   }
   .result-table td:first-child{
     opacity: .8;
     width: 45%;
   }
   /* =========================
      ECSOMAGFUTAR - Unified buttons
      tedd a CSS fájl LEGALJÁRA
   ========================= */
   
   /* minden submit / button egységes */
   .service-section form input[type="submit"],
   .service-section form button[type="submit"],
   /* régi osztályok */
   .ccalc.action-button,
   .action-button,
   .btn.btn-primary {
     appearance: none;
     border: 1px solid #fcba03 !important;
     background: #ffffff !important;
     color: #111111 !important;
   
     border-radius: 14px;
     padding: 12px 18px;
     font-weight: 700;
     letter-spacing: .2px;
   
     box-shadow: 0 8px 18px rgba(0,0,0,.08);
     transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
   
     min-height: 44px; /* mobilbarát */
   }
   
   /* hover: narancs */
   .service-section form input[type="submit"]:hover,
   .service-section form button[type="submit"]:hover,
   .ccalc.action-button:hover,
   .action-button:hover,
   .btn.btn-primary:hover {
     background: #fcba03 !important;
     color: #111111 !important;
     transform: translateY(-1px);
     box-shadow: 0 12px 26px rgba(0,0,0,.12);
   }
   
   /* fókusz (billentyűzettel is szép legyen) */
   .service-section form input[type="submit"]:focus,
   .service-section form button[type="submit"]:focus,
   .ccalc.action-button:focus,
   .action-button:focus,
   .btn.btn-primary:focus {
     outline: none;
     box-shadow: 0 0 0 4px rgba(252,186,3,.25), 0 12px 26px rgba(0,0,0,.12);
   }
   
   /* “loading” állapot – a te JS-ed aria-disabled/pointerEvents-et használ */
   .service-section form [aria-disabled="true"] {
     filter: saturate(.9);
     opacity: .85;
   }
   
   /* ha valahol disabled is előfordul */
   .service-section form input[type="submit"]:disabled,
   .service-section form button[type="submit"]:disabled {
     cursor: not-allowed;
     opacity: .7;
     transform: none;
     box-shadow: none;
   }
   .service-section form input[type="submit"],
   .service-section form button[type="submit"],
   .ccalc.action-button,
   .action-button {
     width: 100%;
     max-width: 420px;
   }
   
   .service-section form {
     text-align: center;
   }
   /* =========================================
      ECSOMAGFUTAR – FINAL BUTTON OVERRIDE
      EZT TEDD A CSS LEGALJÁRA
   ========================================= */
   
   /* MINDEN submit gomb */
   form input[type="submit"],
   form button[type="submit"],
   /* régi, vegyes osztályok */
   .btn,
   .btn-primary,
   .action-button,
   .ccalc,
   .ccalc.action-button {
     appearance: none !important;
     -webkit-appearance: none !important;
   
     background-color: #ffffff !important;
     color: #111111 !important;
     border: 2px solid #fcba03 !important;
   
     border-radius: 16px !important;
     padding: 14px 22px !important;
   
     font-size: 16px;
     font-weight: 700;
     letter-spacing: .3px;
   
     box-shadow: 0 10px 22px rgba(0,0,0,.12) !important;
   
     cursor: pointer;
     transition: all .2s ease;
   
     display: inline-flex;
     align-items: center;
     justify-content: center;
   
     min-height: 48px;
   }
   
   /* HOVER */
   form input[type="submit"]:hover,
   form button[type="submit"]:hover,
   .btn:hover,
   .btn-primary:hover,
   .action-button:hover,
   .ccalc:hover {
     background-color: #fcba03 !important;
     color: #111111 !important;
     transform: translateY(-1px);
     box-shadow: 0 14px 30px rgba(0,0,0,.18) !important;
   }
   
   /* FÓKUSZ */
   form input[type="submit"]:focus,
   form button[type="submit"]:focus {
     outline: none !important;
     box-shadow: 0 0 0 4px rgba(252,186,3,.35),
                 0 14px 30px rgba(0,0,0,.18) !important;
   }
   
   /* LOADING / DUPLAKATT VÉDELEM (JS-ből) */
   form [aria-disabled="true"] {
     pointer-events: none;
     opacity: .85;
   }
   
   /* TELJES SZÉLESSÉG – XXL stílus */
   .form-card form input[type="submit"],
   .form-card form button[type="submit"] {
     width: 100%;
     max-width: 420px;
     margin: 10px auto 0;
   }
   /* =========================================
      ECSOMAGFUTAR – FUNCTION GOMBOK FINAL
      (action-button / submit_* )
   ========================================= */
   
   input.action-button,
   input.submit_ppp_calc,
   input[type="submit"].action-button {
     appearance: none !important;
     -webkit-appearance: none !important;
   
     background-color: #ffffff !important;
     color: #111111 !important;
   
     border: 2px solid #fcba03 !important;
     border-radius: 16px !important;
   
     padding: 14px 24px !important;
     font-size: 16px !important;
     font-weight: 700 !important;
     letter-spacing: .3px;
   
     cursor: pointer;
   
     box-shadow: 0 10px 22px rgba(0,0,0,.12) !important;
     transition: all .2s ease;
   
     width: 100%;
     max-width: 360px;
   
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
   
   /* HOVER */
   input.action-button:hover,
   input.submit_ppp_calc:hover {
     background-color: #fcba03 !important;
     color: #111111 !important;
     transform: translateY(-1px);
     box-shadow: 0 14px 30px rgba(0,0,0,.18) !important;
   }
   
   /* FÓKUSZ */
   input.action-button:focus {
     outline: none !important;
     box-shadow:
       0 0 0 4px rgba(252,186,3,.35),
       0 14px 30px rgba(0,0,0,.18) !important;
   }
   
   /* LOADING / DUPLA KATT */
   input.action-button[aria-disabled="true"] {
     pointer-events: none;
     opacity: .8;
   }
   /* ===== ECSOMAGFUTAR HEADER (NEW) ===== */
   
   .e-header {
     background: linear-gradient(135deg, #284369, #1e2f4d);
     color: #fff;
     padding: 16px 20px;
     border-bottom: 3px solid #fcba03;
   }
   
   .e-header-logo {
     max-width: 90px;
     height: auto;
   }
   
   .e-header-title {
     font-size: 22px;
     font-weight: 700;
     letter-spacing: 0.5px;
   }
   
   .e-header-sub {
     font-size: 14px;
     opacity: 0.9;
   }
   
   .e-header-open {
     font-size: 13px;
     margin-top: 4px;
     opacity: 0.8;
   }
   
   .e-header-facebook {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: #fcba03;
     color: #1e2f4d;
     font-weight: bold;
     text-decoration: none;
     transition: all 0.2s ease;
   }
   
   .e-header-facebook:hover {
     background: #fff;
     color: #284369;
   }
   /* ==========================
      MINI HEADER (FOLLOW-UP)
   ========================== */
   
   .mini-header {
     background: #f6f7f9;
     border-bottom: 1px solid #e2e2e2;
   }
   
   .mini-header-inner {
     max-width: 1100px;
     margin: 0 auto;
     padding: 12px 16px;
     display: flex;
     align-items: center;
     gap: 20px;
   }
   
   .mini-brand img {
     height: 48px;
     width: auto;
   }
   
   .mini-title {
     flex: 1;
     line-height: 1.2;
   }
   
   .mini-title strong {
     display: block;
     font-size: 18px;
     color: #222;
   }
   
   .mini-title span {
     font-size: 13px;
     color: #777;
   }
   
   .mini-contact {
     text-align: right;
     font-size: 13px;
     color: #444;
   }
   
   .mini-contact span {
     display: block;
   }
   
   .mini-status {
     text-align: right;
     font-size: 12px;
   }
   
   .mini-status .status {
     display: inline-block;
     padding: 4px 8px;
     border-radius: 6px;
     font-weight: 600;
     margin-bottom: 2px;
   }
   
   .mini-status .open {
     background: #e6f6ea;
     color: #1c7c3e;
   }
   
   .mini-status .closed {
     background: #fdecea;
     color: #b42318;
   }
   
   /* mobil */
   @media (max-width: 768px) {
     .mini-header-inner {
       flex-wrap: wrap;
       text-align: center;
     }
   
     .mini-contact,
     .mini-status {
       width: 100%;
       text-align: center;
     }
   }
   /* ==========================
      FOOTER – XXL STYLE
   ========================== */
   
   .site-footer {
     background: #1f2933;
     color: #cbd5e1;
     margin-top: 60px;
   }
   
   .footer-inner {
     max-width: 1100px;
     margin: 0 auto;
     padding: 40px 16px 30px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 32px;
   }
   
   .footer-col h4 {
     color: #ffffff;
     font-size: 16px;
     margin-bottom: 14px;
     font-weight: 600;
   }
   
   .footer-col ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }
   
   .footer-col li {
     margin-bottom: 8px;
   }
   
   .footer-col a {
     color: #cbd5e1;
     font-size: 14px;
     text-decoration: none;
     transition: color 0.2s ease;
   }
   
   .footer-col a:hover {
     color: #fcba03;
     text-decoration: underline;
   }
   
   /* alsó sáv */
   .footer-bottom {
     border-top: 1px solid rgba(255,255,255,0.08);
     padding: 14px 16px;
     text-align: center;
     font-size: 12px;
     color: #94a3b8;
   }
   
   /* mobil */
   @media (max-width: 768px) {
     .footer-inner {
       grid-template-columns: 1fr;
       text-align: center;
     }
   
     .footer-col ul {
       margin-bottom: 20px;
     }
   }
   /* ==========================
      TRUST BAR (footer felett)
   ========================== */
   
   .trustbar {
     padding: 22px 16px;
     background: #f7f7f7;
     border-top: 1px solid rgba(0,0,0,0.06);
   }
   
   .trustbar-inner {
     max-width: 1100px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 14px;
   }
   
   .trust-item {
     background: #ffffff;
     border-radius: 14px;
     padding: 14px 14px;
     display: flex;
     align-items: center;
     gap: 12px;
     box-shadow: 0 6px 18px rgba(0,0,0,0.06);
     border: 1px solid rgba(0,0,0,0.04);
   }
   
   .trust-icon {
     width: 40px;
     height: 40px;
     border-radius: 12px;
     background: rgba(252, 186, 3, 0.18);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     flex: 0 0 40px;
   }
   
   .trust-title {
     font-weight: 700;
     font-size: 14px;
     color: #1f2933;
     line-height: 1.2;
   }
   
   .trust-sub {
     font-size: 12px;
     color: #667085;
     margin-top: 2px;
     line-height: 1.2;
   }
   
   /* tablet */
   @media (max-width: 992px) {
     .trustbar-inner {
       grid-template-columns: repeat(2, 1fr);
     }
   }
   
   /* mobil */
   @media (max-width: 576px) {
     .trustbar-inner {
       grid-template-columns: 1fr;
     }
   }
   /* =========================
      FOOTER (new)
   ========================= */
   .site-footer{
     margin-top: 28px;
     background: #0f1b2a;
     color: #f4ecdf;
   }
   
   .site-footer a{
     color: #f4ecdf;
     text-decoration: none;
   }
   
   .site-footer a:hover{
     text-decoration: underline;
   }
   
   .footer-inner{
     max-width: 1320px;   /* volt 1100 */
     margin: 0 auto;
     padding: 40px 24px; /* több levegő */
   }
   
   
   .footer-grid{
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 32px; /* volt 18 */
   }
   
   
   .footer-col{
     background: rgba(255,255,255,0.05);
     border: 1px solid rgba(255,255,255,0.1);
     border-radius: 20px;
     padding: 24px 22px;
   }
   
   
   .footer-col h3{
     margin-bottom: 14px;
     font-size: 19px;
     letter-spacing: 0.3px;
   }
   
   
   .footer-links{
     margin: 0;
     padding: 0;
     list-style: none;
   }
   
  .footer-links li{
    margin: 10px 0;
  }
  
  .footer-links a{
    font-size: 15px;
  }
  
   
   /* kis ikon a linkek elé (nem kell külön kép) */
   .footer-links a::before{
     content: "";
     width: 8px;
     height: 8px;
     border-radius: 99px;
     background: #fcba03; /* a narancsod */
     display: inline-block;
     flex: 0 0 auto;
     box-shadow: 0 0 0 3px rgba(252,186,3,0.15);
   }
   
   .footer-bottom{
     border-top: 1px solid rgba(255,255,255,0.12);
     background: rgba(0,0,0,0.25);
   }
   
   .footer-bottom-inner{
     max-width: 1320px; /* volt 1100 */
     margin: 0 auto;
     padding: 14px 24px;
     font-size: 12px;
   }
   
   
   /* mobil */
   @media (max-width: 992px){
     .footer-grid{
       grid-template-columns: 1fr;
     }
     .footer-col{
       border-radius: 14px;
     }
   }
   
   
   .trust-icon-img{
     width: 44px;
     height: 44px;
     border-radius: 12px;
     background: rgba(252, 186, 3, 0.18);
     display:flex;
     align-items:center;
     justify-content:center;
     flex: 0 0 44px;
   }
   
   .trust-icon-img img{
     max-width: 28px;
     max-height: 28px;
     display:block;
   }
   
   /* =========================
      TRUST BAR
   ========================= */
   .trustbar{
     width: 100%;
     background: #0b1a2a;
     border-top: 1px solid rgba(255,255,255,.08);
     border-bottom: 1px solid rgba(255,255,255,.08);
   }
   
   .trustbar-inner{
     max-width: 1200px;
     margin: 0 auto;
     padding: 14px 16px;
     display: flex;
     gap: 16px;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
   }
   
   .trust-item{
     display: inline-flex;
     gap: 10px;
     align-items: center;
     color: #e9eef5;
     font-size: 14px;
     padding: 8px 12px;
     border-radius: 14px;
     background: rgba(255,255,255,.06);
   }
   
   .trust-item img{
     height: 22px;
     width: auto;
     display: block;
   }
   
   .trust-icon{
     font-size: 18px;
     line-height: 1;
   }
   /* TRUST BAR */
   .trustbar {
     padding: 22px 16px;
     background: #0b1a2a;
     border-top: 1px solid rgba(255,255,255,.08);
     border-bottom: 1px solid rgba(255,255,255,.08);
   }
   .trustbar-inner {
     max-width: 1320px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 14px;
   }
   .trust-item {
     background: rgba(255,255,255,.06);
     border: 1px solid rgba(255,255,255,.08);
     border-radius: 16px;
     padding: 14px;
     display: flex;
     align-items: center;
     gap: 12px;
     color: #e9eef5;
   }
   .trust-icon {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     background: rgba(252,186,3,.18);
     display:flex;
     align-items:center;
     justify-content:center;
     flex: 0 0 44px;
     font-size: 18px;
   }
   .trust-icon-img{
     width: 44px;
     height: 44px;
     border-radius: 12px;
     background: rgba(252, 186, 3, 0.18);
     display:flex;
     align-items:center;
     justify-content:center;
     flex: 0 0 44px;
   }
   .trust-icon-img img{
     max-width: 28px;
     max-height: 28px;
     display:block;
   }
   .trust-title { font-weight: 800; font-size: 14px; line-height: 1.2; }
   .trust-sub { font-size: 12px; opacity: .85; margin-top: 2px; }
   
   @media (max-width: 992px){
     .trustbar-inner { grid-template-columns: repeat(2, 1fr); }
   }
   @media (max-width: 576px){
     .trustbar-inner { grid-template-columns: 1fr; }
   }
   
   /* FOOTER */
   .site-footer{
     background: #0f1b2a;
     color: #f4ecdf;
   }
   .footer-inner{
     max-width: 1320px;
     margin: 0 auto;
     padding: 40px 24px;
   }
   .footer-grid{
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 32px;
   }
   .footer-col{
     background: rgba(255,255,255,0.05);
     border: 1px solid rgba(255,255,255,0.10);
     border-radius: 20px;
     padding: 24px 22px;
   }
   .footer-col h3{
     margin-bottom: 14px;
     font-size: 19px;
     letter-spacing: 0.3px;
   }
   .footer-links{
     margin: 0;
     padding: 0;
     list-style: none;
   }
   .footer-links li{ margin: 10px 0; }
   .footer-links a{
     color: #f4ecdf;
     text-decoration: none;
     font-size: 15px;
   }
   .footer-links a:hover{ text-decoration: underline; }
   .footer-links a::before{
     content: "";
     width: 8px;
     height: 8px;
     border-radius: 99px;
     background: #fcba03;
     display: inline-block;
     margin-right: 10px;
     box-shadow: 0 0 0 3px rgba(252,186,3,0.15);
     transform: translateY(-1px);
   }
   .footer-bottom{
     border-top: 1px solid rgba(255,255,255,0.12);
     background: rgba(0,0,0,0.25);
   }
   .footer-bottom-inner{
     max-width: 1320px;
     margin: 0 auto;
     padding: 14px 24px;
     font-size: 12px;
     opacity: .9;
     text-align: center;
   }
   
   @media (max-width: 992px){
     .footer-grid{ grid-template-columns: 1fr; }
     .footer-col{ border-radius: 14px; }
   }
   /* =========================================================
      FOOTER – DESKTOP "NE LEGYEN PRÉSELT" FIX (LEGYEN 3 OSZLOP)
      Tedd a CSS LEGALJÁRA
   ========================================================= */
   
   footer {
     width: 100%;
   }
   
   /* a container ne fogja vissza túl szűkre */
   footer .container.bg-second-in{
     max-width: 1320px !important;
     width: 100% !important;
     margin-left: auto !important;
     margin-right: auto !important;
     padding-left: 24px !important;
     padding-right: 24px !important;
   }
   
   /* a row legyen klasszikus flex, ne grid, ne törés */
   footer .container.bg-second-in > .row{
     display: flex !important;
     flex-wrap: wrap !important;
     justify-content: space-between !important; /* ne középre préselje */
     align-items: stretch !important;
     margin-left: 0 !important;
     margin-right: 0 !important;
     gap: 24px !important; /* levegő */
   }
   
   /* oszlopok: desktopon fix 3 oszlop */
   footer .container.bg-second-in > .row > .col-md-4{
     flex: 0 0 calc(33.333% - 16px) !important;
     max-width: calc(33.333% - 16px) !important;
     width: calc(33.333% - 16px) !important;
     padding: 0 !important;
   }
   
   /* ha a col-12 is beleszól */
   footer .container.bg-second-in > .row > .col-12{
     flex: 0 0 calc(33.333% - 16px) !important;
     max-width: calc(33.333% - 16px) !important;
     width: calc(33.333% - 16px) !important;
   }
   
   /* a belső tartalom doboza töltse ki a col-t */
   footer .container.bg-second-in > .row > .col-md-4 > *{
     width: 100% !important;
   }
   
   /* lista */
   footer ul{
     list-style: none !important;
     padding-left: 0 !important;
     margin: 12px 0 0 0 !important;
   }
   footer li{
     margin: 10px 0 !important;
   }
   
   /* mobilon 1 oszlop */
   @media (max-width: 992px){
     footer .container.bg-second-in > .row{
       gap: 14px !important;
     }
     footer .container.bg-second-in > .row > .col-md-4,
     footer .container.bg-second-in > .row > .col-12{
       flex: 0 0 100% !important;
       max-width: 100% !important;
       width: 100% !important;
     }
   }
   /* =========================================================
      SITE-FOOTER (NEW) – DESKTOP "NE LEGYEN PRÉSELT" FIX
      Tedd a CSS LEGALJÁRA
   ========================================================= */
   
   .site-footer{
     width: 100% !important;
   }
   
   /* a belső keret legyen tényleg széles */
   .site-footer .footer-inner{
     width: 100% !important;
     max-width: 1320px !important;
     margin: 0 auto !important;
     padding: 44px 24px !important;
   
     /* ha valami globál flex/grid keveri: */
     display: block !important;
   }
   
   /* A GRID legyen GRID, ne írja felül semmi */
   .site-footer .footer-grid{
     display: grid !important;
     grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
     gap: 28px !important;
   
     /* ezek sok “préselés” bugot megoldanak */
     width: 100% !important;
     max-width: 100% !important;
     justify-content: stretch !important;
     align-items: stretch !important;
   }
   
   /* A kártyák töltsék ki az oszlopot (ne zsugorodjanak) */
   .site-footer .footer-col{
     width: 100% !important;
     min-width: 0 !important;
   }
   
   /* ha valami globál szabály miatt a grid-elemek "fit-content"-re esnek */
   .site-footer .footer-grid > *{
     min-width: 0 !important;
   }
   
   /* Tablet/mobil: 1 oszlop */
   @media (max-width: 992px){
     .site-footer .footer-grid{
       grid-template-columns: 1fr !important;
     }
     .site-footer .footer-inner{
       padding: 28px 16px !important;
     }
   }
   /* =========================
      TRUST BAR – XXL kártyás
   ========================= */
   .trustbar{
     width:100%;
     background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
     border-top: 1px solid rgba(255,255,255,.08);
     border-bottom: 1px solid rgba(255,255,255,.08);
     padding: 22px 16px;
   }
   
   .trustbar-inner{
     max-width: 1320px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(4, minmax(220px, 1fr));
     gap: 14px;
   }
   
   .trust-card{
     background: rgba(255,255,255,.06);
     border: 1px solid rgba(255,255,255,.10);
     border-radius: 18px;
     padding: 14px 14px;
     display: flex;
     align-items: center;
     gap: 12px;
     box-shadow: 0 10px 22px rgba(0,0,0,.18);
     backdrop-filter: blur(6px);
   }
   
   .trust-ic{
     width: 44px;
     height: 44px;
     border-radius: 14px;
     background: rgba(252,186,3,.18);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     flex: 0 0 44px;
   }
   
   .trust-title{
     color: #f4ecdf;
     font-weight: 800;
     font-size: 14px;
     letter-spacing: .2px;
     line-height: 1.2;
   }
   
   .trust-sub{
     margin-top: 3px;
     color: rgba(244,236,223,.82);
     font-size: 12px;
     line-height: 1.2;
   }
   
   /* tablet */
   @media (max-width: 992px){
     .trustbar-inner{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
   }
   
   /* mobil */
   @media (max-width: 576px){
     .trustbar-inner{ grid-template-columns: 1fr; }
   }
   /* 1) MOBILON: service kártyák 1 oszlop */
   @media (max-width: 768px){
     .service-grid{
       grid-template-columns: 1fr !important;
       gap: 18px !important;
     }
   
     .service-card{
       max-width: 520px;
       margin: 0 auto;
     }
   }
   /* 2) MOBILON: kalkulátor formok 1 oszlop */
   @media (max-width: 768px){
   
     /* a standard formok belső wrapperét 1 oszlopra kényszerítjük */
     .service-section form.form-inline > div{
       display: flex !important;
       flex-wrap: wrap !important;
       gap: 12px !important;
     }
   
     /* minden mező (submit kivétel) full width */
     .service-section form.form-inline > div > input:not([type="submit"]),
     .service-section form.form-inline > div > select,
     .service-section form.form-inline > div > textarea{
       flex: 0 0 100% !important;
       max-width: 100% !important;
       width: 100% !important;
     }
   
     /* a blokkos részek (utánvét, biztosítás, rádiók stb.) maradjanak full width */
     .service-section form.form-inline > div > div,
     .service-section form.form-inline > div > p,
     .service-section form.form-inline > div > h6,
     .service-section form.form-inline > div > hr{
       flex: 0 0 100% !important;
       max-width: 100% !important;
       width: 100% !important;
     }
   
     /* submit gomb is full width */
     .service-section form.form-inline > div > input[type="submit"],
     .service-section form.form-inline > div > button[type="submit"]{
       flex: 0 0 100% !important;
       max-width: 100% !important;
       width: 100% !important;
     }
   }
   /* 3/A) Cookie banner ne tudjon szélességet szétfeszíteni */
   html, body{
     overflow-x: hidden !important;
   }
   
   /* tipikus cookie plugin osztályok – ha van találat, ezek megfogják */
   .cookie,
   .cookies,
   .cookie-banner,
   .cookie-consent,
   .cc-window,
   #cookie, #cookies, #cookiebanner, #cookie-banner{
     max-width: 100% !important;
     overflow-wrap: anywhere !important;
     word-break: break-word !important;
   }
   
   /* gombok/links is törhessenek */
   .cookie a,
   .cookies a,
   .cc-window a{
     overflow-wrap: anywhere !important;
     word-break: break-word !important;
   }
   /* =========================================================
      MOBILE FIXES (cards + forms + cookie banner overflow)
      Tedd a CSS fájl LEGALJÁRA
   ========================================================= */
   
   /* 3) CookieScript ne feszítse szét az oldalt */
   html, body{
     max-width: 100%;
     overflow-x: hidden !important;
   }
   
   /* CookieScript tipikus konténerek – többféle névvel is előfordulhat */
   #cookiescript_injected,
   #cookiescript-wrapper,
   #cookiescript,
   .cookiescript_injected,
   .CookieScript,
   [class*="cookiescript"],
   [id*="cookiescript"]{
     max-width: 100vw !important;
     box-sizing: border-box !important;
   }
   
   /* ha valami fix szélességet kapna */
   #cookiescript_injected *,
   #cookiescript-wrapper *,
   #cookiescript *,
   .cookiescript_injected *,
   .CookieScript *,
   [class*="cookiescript"] *,
   [id*="cookiescript"] *{
     max-width: 100vw !important;
     box-sizing: border-box !important;
   }
   
   /* 1) Szolgáltatás kártyák: mobilon 1 oszlop */
   @media (max-width: 768px){
     .service-grid{
       grid-template-columns: 1fr !important;
     }
   }
   
   /* 2) Kalkulátorformok: mobilon minden input 100% széles (1 oszlop) */
   @media (max-width: 768px){
   
     /* a standard formjaid belső 100%-os wrapje */
     .service-section form.form-inline > div{
       display: block !important;      /* ne legyen 2 oszlopos flex/grid */
     }
   
     /* minden mező 1 oszlop */
     .service-section form input:not([type="radio"]):not([type="checkbox"]),
     .service-section form select,
     .service-section form textarea{
       width: 100% !important;
       max-width: 100% !important;
       flex: none !important;
     }
   
     /* submit is 100% */
     .service-section form input[type="submit"],
     .service-section form button[type="submit"]{
       width: 100% !important;
       max-width: 100% !important;
     }
   
     /* inline hibák is 100% */
     .service-section .field-error{
       max-width: 100% !important;
     }
   }
   /* =========================
      TRUST BAR – SVG (XXL style)
      ========================= */
   .trustbar.trustbar--xl{
     width: 100%;
     background: #0b1a2a;
     border-top: 1px solid rgba(255,255,255,.10);
     border-bottom: 1px solid rgba(255,255,255,.10);
   }
   
   .trustbar.trustbar--xl .trustbar-inner{
     max-width: 1320px;
     margin: 0 auto;
     padding: 18px 24px;
     display: grid;
     grid-template-columns: repeat(4, minmax(0,1fr));
     gap: 14px;
   }
   
   .trustbar.trustbar--xl .trust-item{
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 14px 14px;
     border-radius: 18px;
     background: rgba(255,255,255,.06);
     border: 1px solid rgba(255,255,255,.10);
     box-shadow: 0 10px 26px rgba(0,0,0,.18);
   }
   
   .trustbar.trustbar--xl .trust-icon{
     width: 44px;
     height: 44px;
     border-radius: 14px;
     background: rgba(252,186,3,.16);
     display: grid;
     place-items: center;
     flex: 0 0 44px;
   }
   
   .trustbar.trustbar--xl .trust-icon svg{
     width: 22px;
     height: 22px;
     display: block;
     fill: none;
     stroke: #fcba03;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
   }
   
   .trustbar.trustbar--xl .trust-title{
     font-weight: 800;
     font-size: 14px;
     line-height: 1.15;
     color: #f4ecdf;
     letter-spacing: .2px;
   }
   
   .trustbar.trustbar--xl .trust-sub{
     margin-top: 3px;
     font-size: 12px;
     line-height: 1.2;
     color: rgba(244,236,223,.78);
   }
   
   /* Hover finoman */
   .trustbar.trustbar--xl .trust-item:hover{
     border-color: rgba(252,186,3,.35);
     transform: translateY(-1px);
     transition: transform .12s ease, border-color .2s ease;
   }
   
   /* Tablet */
   @media (max-width: 992px){
     .trustbar.trustbar--xl .trustbar-inner{
       grid-template-columns: repeat(2, minmax(0,1fr));
     }
   }
   
   /* Mobil */
   @media (max-width: 576px){
     .trustbar.trustbar--xl .trustbar-inner{
       grid-template-columns: 1fr;
       padding: 16px 16px;
     }
   }
   /* TRUSTBAR SVG FIX – mindent felülír */
   .trustbar .trust-icon svg,
   .trustbar .trust-icon svg *{
     fill: none !important;
     stroke: #fcba03 !important;
     stroke-width: 2 !important;
     stroke-linecap: round !important;
     stroke-linejoin: round !important;
   }
   .trustbar.trustbar--xl .trust-item{
     padding: 16px 16px;
     border-radius: 20px;
   }
   /* ===== Success / result page (XXL style) ===== */
   .result-wrap{ max-width: 980px; margin: 0 auto; padding: 24px 16px; }
   
   .result-card{
     background:#fff;
     border-radius:20px;
     padding:22px;
     box-shadow:0 16px 40px rgba(0,0,0,.10);
     border:1px solid rgba(0,0,0,.06);
   }
   
   .result--success{ border-left: 6px solid rgba(34,197,94,.9); }
   .result--info{ border-left: 6px solid rgba(59,130,246,.9); }
   .result--error{ border-left: 6px solid rgba(239,68,68,.9); }
   
   .result-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:14px; }
   
   .result-icon{
     width:44px; height:44px; border-radius:14px;
     display:flex; align-items:center; justify-content:center;
     background:rgba(34,197,94,.12);
     color:rgba(22,163,74,1);
     flex:0 0 44px;
   }
   
   .result-title{ margin:0; font-size:22px; line-height:1.2; color:#0f172a; }
   .result-lead{ margin:6px 0 0 0; color:#475569; }
   
   .result-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
   
   .result-box{
     background:#f8fafc;
     border:1px solid rgba(0,0,0,.06);
     border-radius:14px;
     padding:12px;
   }
   
   .result-k{ font-size:12px; color:#64748b; margin-bottom:4px; }
   .result-v{ font-size:14px; font-weight:700; color:#0f172a; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
   
   .result-copy{
     border:1px solid rgba(0,0,0,.12);
     background:#fff;
     border-radius:12px;
     padding:6px 10px;
     font-weight:700;
     cursor:pointer;
   }
   
   .result-steps{ margin-top:16px; padding-top:14px; border-top:1px solid rgba(0,0,0,.08); }
   .result-h2{ font-size:16px; margin:0 0 10px 0; color:#0f172a; text-align:left; }
   
   .result-actions{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
   .result-actions .btn{ border-radius:16px; padding:12px 18px; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
   
   .result-actions .btn-primary{ background:#fcba03; color:#111; border:2px solid #fcba03; }
   .result-actions .btn-primary:hover{ background:#e0a702; border-color:#e0a702; }
   
   .result-actions .btn-outline{ background:#fff; color:#111; border:2px solid rgba(252,186,3,.9); }
   .result-actions .btn-outline:hover{ background:#fcba03; }
   
   .result-actions .btn-ghost{ background:rgba(15,23,42,.06); color:#0f172a; border:2px solid rgba(15,23,42,.10); }
   .result-actions .btn-ghost:hover{ background:rgba(15,23,42,.10); }
   
   @media (max-width: 900px){ .result-grid{ grid-template-columns:1fr 1fr; } }
   @media (max-width: 560px){ .result-grid{ grid-template-columns:1fr; } .result-card{ padding:18px 16px; } }
   /* =========================
      CHECKOUT / FIZETÉS (XXL UI)
      tedd a main.css legaljára
   ========================= */
   .checkout-wrap{
     max-width: 1200px;
     margin: 0 auto;
     padding: 18px 12px;
   }
   .checkout-grid{
     display: grid;
     grid-template-columns: 1.35fr 1fr;
     gap: 18px;
   }
   .checkout-card{
     background: #ffffff;
     border-radius: 18px;
     box-shadow: 0 12px 28px rgba(0,0,0,0.08);
     padding: 18px;
   }
   .checkout-head{
     display: flex;
     gap: 12px;
     align-items: flex-start;
   }
   .checkout-ic{
     width: 42px;
     height: 42px;
     border-radius: 14px;
     background: rgba(252,186,3,0.18);
     display:flex;
     align-items:center;
     justify-content:center;
     color:#1f2933;
     flex:0 0 42px;
   }
   .checkout-title{
     margin: 0 0 6px 0;
     font-size: 20px;
     line-height: 1.25;
     color: #111827;
     text-align: left;
   }
   .checkout-lead{
     margin: 0 0 10px 0;
     color:#4b5563;
   }
   .checkout-warn{
     margin: 0;
     padding: 10px 12px;
     border-radius: 14px;
     background: #fff7e6;
     border: 1px solid rgba(252,186,3,0.35);
     color:#1f2933;
   }
   .checkout-section{
     margin-top: 14px;
     padding-top: 14px;
     border-top: 1px solid rgba(0,0,0,0.08);
   }
   .checkout-label{
     font-size: 12px;
     letter-spacing: .3px;
     text-transform: uppercase;
     color:#6b7280;
     margin-bottom: 6px;
   }
   .checkout-value{
     color:#111827;
   }
   .checkout-list{
     margin: 8px 0 0 16px;
     padding: 0;
   }
   .checkout-list li{
     margin: 6px 0;
     color:#111827;
   }
   .checkout-meta{
     margin-top: 10px;
     color:#374151;
     font-size: 14px;
   }
   .checkout-total{
     margin-top: 16px;
     display:flex;
     justify-content: space-between;
     align-items:center;
     padding: 14px 14px;
     border-radius: 16px;
     background: #0f1b2a;
     color:#f4ecdf;
   }
   .checkout-total b{
     font-size: 18px;
   }
   
   /* payment box */
   .pay-title{
     margin: 0 0 12px 0;
     font-size: 18px;
     color:#111827;
     text-align:left;
   }
   .pay-form{ margin: 0; }
   .pay-option{
     display: grid;
     grid-template-columns: 88px 1fr;
     gap: 12px;
     align-items: center;
   }
   .pay-logo img{
     max-width: 88px;
     height: auto;
     display:block;
   }
   .pay-text .pay-main{
     font-weight: 800;
     color:#111827;
     margin-bottom: 2px;
   }
   .pay-text .pay-sub{
     color:#4b5563;
     font-size: 14px;
   }
   .pay-action{
     grid-column: 1 / -1;
     margin-top: 10px;
   }
   .pay-divider{
     height: 1px;
     background: rgba(0,0,0,0.08);
     margin: 14px 0;
   }
   
   /* mobil */
   @media (max-width: 900px){
     .checkout-grid{
       grid-template-columns: 1fr;
     }
   }
   /* PAY OPTION – logo felül, szöveg alatta */
   .pay-option--stack{
     display: block !important;
   }
   
   .pay-logo--wide{
     width: 100%;
     margin-bottom: 10px;
   }
   
   .pay-logo--wide img{
     display: block;
     width: 100%;
     max-width: 320px;     /* desktopen szép, nem túl nagy */
     height: auto;
     margin: 0 auto 12px; /* középre + alatta tér */
     object-fit: contain;
   }
   
   
   /* a netbank kép ha magasabb, külön engedjük */
   .pay-option--stack .pay-logo--wide img[alt="Banki utalás"]{
     max-height: 64px;
   }
   .pay-logo-barion{
     max-width: 360px;
   }
   /* =========================
      BARION LOGO – FORCE FIX
   ========================= */
   
   .pay-method .barion-logo{
     width: 100%;
     text-align: center;
     margin: 10px 0 18px;
   }
   
   .pay-method .barion-logo img{
     width: 100% !important;
     max-width: 560px !important;   /* <-- Itt a méret */
     height: auto !important;
     max-height: none !important;   /* <-- EZ a kulcs */
     min-height: 80px !important;
     display: block !important;
     margin: 0 auto !important;
     object-fit: contain !important;
   }
   
   /* mobil */
   @media (max-width: 768px){
     .pay-method .barion-logo img{
       max-width: 420px !important;
     }
   }
   .payment-icons,
   .payment-method-icons,
   .card-icons,
   .pay-icons {
     display: none !important;
   }
   /* =========================
      BARION NAGY BANNER
   ========================= */
   
   .barion-banner{
     width: 100%;
     margin: 10px 0 22px;
     text-align: center;
   }
   
   .barion-banner img{
     width: 100% !important;
     max-width: 640px !important;   /* DESKTOP */
     height: auto !important;
     max-height: none !important;
     display: block;
     margin: 0 auto;
     object-fit: contain;
   }
   
   /* mobil */
   @media (max-width: 768px){
     .barion-banner img{
       max-width: 460px !important;
     }
   }
   /* =========================
      CHECKOUT / VÉGLEGESÍTÉS – UI
   ========================= */
   .result-wrap{
     max-width: 1100px;
     margin: 0 auto;
     padding: 18px 12px 40px;
   }
   
   .result-grid{
     display: grid;
     grid-template-columns: 1.35fr 0.85fr;
     gap: 18px;
     align-items: start;
   }
   
   .result-card{
     background: #fff;
     border-radius: 18px;
     box-shadow: 0 12px 30px rgba(0,0,0,.08);
     padding: 18px;
   }
   
   .result-head{
     display: flex;
     gap: 12px;
     align-items: flex-start;
   }
   
   .result-badge{
     width: 34px;
     height: 34px;
     border-radius: 10px;
     background: rgba(252,186,3,.18);
     display: flex;
     align-items: center;
     justify-content: center;
     flex: 0 0 34px;
   }
   
   .result-title{
     margin: 0 0 6px 0;
     font-size: 18px;
     color: #111827;
   }
   
   .result-lead{
     margin: 0;
     color: #6b7280;
     font-size: 14px;
   }
   
   .result-alert{
     margin-top: 14px;
     background: #fff7e6;
     border: 1px solid rgba(252,186,3,.45);
     border-radius: 14px;
     padding: 12px 14px;
     color: #111827;
     font-size: 14px;
   }
   
   .result-divider{
     height: 1px;
     background: rgba(0,0,0,.08);
     margin: 16px 0;
   }
   
   .result-block{
     padding: 12px 0;
     border-bottom: 1px solid rgba(0,0,0,.06);
   }
   .result-block:last-of-type{ border-bottom: 0; }
   
   .result-block-title{
     font-size: 12px;
     letter-spacing: .6px;
     text-transform: uppercase;
     color: #6b7280;
     margin-bottom: 6px;
   }
   
   .result-block-body{
     color: #111827;
     font-size: 14px;
     line-height: 1.45;
   }
   
   .result-total{
     margin-top: 12px;
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     gap: 10px;
     padding: 12px 14px;
     border-radius: 14px;
     background: rgba(0,0,0,.03);
   }
   
   .result-total-amount{
     font-size: 18px;
     font-weight: 800;
   }
   
   .result-details summary{
     cursor: pointer;
     font-weight: 700;
     color: #111827;
     padding: 8px 0;
   }
   .result-details-body{
     padding-top: 8px;
     color: #374151;
     font-size: 14px;
   }
   .result-details-body p{ margin: 10px 0; }
   
   /* jobb oldal fizetés */
   .pay-head{
     margin: 0 0 10px;
     font-size: 16px;
     font-weight: 800;
     color: #111827;
   }
   
   .pay-method{
     padding: 12px 0;
   }
   
   .pay-title{
     font-weight: 800;
     margin-top: 6px;
     color: #111827;
   }
   
   .pay-sub{
     color: #6b7280;
     font-size: 13px;
     margin: 6px 0 12px;
   }
   
   .pay-sep{
     height: 1px;
     background: rgba(0,0,0,.08);
     margin: 10px 0;
   }
   
   /* Barion banner nagy, középen */
   .barion-banner{
     width: 100%;
     text-align: center;
     margin: 2px 0 10px;
   }
   .barion-banner img{
     width: 100% !important;
     max-width: 520px !important;
     height: auto !important;
     display: block;
     margin: 0 auto;
     object-fit: contain;
   }
   
   /* utalás kép */
   .pay-icon{
     text-align: center;
     margin: 2px 0 10px;
   }
   .pay-icon img{
     max-width: 260px;
     width: 100%;
     height: auto;
     display: block;
     margin: 0 auto;
     object-fit: contain;
   }
   
   /* gombok illesztése */
   .btn-pay{
     width: 100%;
     max-width: 420px;
     margin: 0 auto;
     display: block;
   }
   
   /* ghost jelleg a második gombra (opcionális) */
   .btn-pay--ghost{
     background: #fff !important;
     border: 2px solid #fcba03 !important;
     color: #111 !important;
   }
   .btn-pay--ghost:hover{
     background: #fcba03 !important;
   }
   
   /* mobil */
   @media (max-width: 992px){
     .result-grid{
       grid-template-columns: 1fr;
     }
   }
   /* ===== CÉGES LOGÓSÁV – DESKTOP KÖZÉP + MOBIL TÖRÉS ===== */
   
   /* a logók konténere */
   .corp-logos{
     display: flex;
     align-items: center;
     justify-content: center;   /* <-- középre desktopon */
     gap: 18px;
     flex-wrap: wrap;           /* ha kell, tudjon törni */
     max-width: 100%;
   }
   
   /* a logók soha ne feszítsék szét a layoutot */
   .corp-logos img{
     display: block;
     height: auto;
     max-width: 100%;
   }
   
   /* DESKTOP: normál méret, egymás mellett */
   @media (min-width: 769px){
     .corp-logos img{
       max-width: 260px;        /* állíthatod 220–320 között */
     }
   }
   
   /* MOBIL: egymás alá + kisebb max szélesség (ne lógjon ki) */
   @media (max-width: 768px){
     .corp-logos{
       flex-direction: column;
       gap: 12px;
     }
     .corp-logos img{
       max-width: 220px;
     }
   }
   /* ===== XXL-style unify pack (append to home.css) ===== */
   
   :root{
     --brand-gold:#fcba03;
     --brand-gold-hover:#e0a702;
     --brand-dark:#1e2530;
     --soft-bg:#f4ecdf;
     --line-bg:#e3e2e1;
   }
   
   /* Hero */
   .hero{
     max-width: 1100px;
     margin: 0 auto;
     padding: 28px 16px 6px 16px;
   }
   .hero h1{
     font-weight: 800;
     letter-spacing: .2px;
   }
   .hero p{
     margin: 10px 0 0 0;
     color: #2a2a2a;
     line-height: 1.6;
   }
   
   /* Form containers */
   .service-section{
     max-width: 1100px;
     margin: 0 auto;
     padding: 18px 16px 40px 16px;
   }
   
   .form-card{
     background: #fff;
     border-radius: 18px;
     padding: 18px 16px;
     box-shadow: 0 8px 24px rgba(0,0,0,.08);
     border: 1px solid rgba(0,0,0,.06);
   }
   .form-card h2, .form-card h3, .form-card h4{
     margin-top: 0;
   }
   
   /* Inputs */
   .input-line{
     width: 220px;
     border: none;
     border-bottom: 1px solid var(--brand-gold);
     background: var(--line-bg);
     padding: 10px 10px;
     border-radius: 10px;
     outline: none;
   }
   .input-line:focus{
     box-shadow: 0 0 0 3px rgba(252,186,3,.25);
   }
   
   /* Selects same look */
   .select-line{
     width: 100%;
     background: var(--brand-gold);
     padding: 10px 10px;
     color: var(--brand-dark);
     border: none;
     border-radius: 12px;
     outline: none;
   }
   .select-line:focus{
     box-shadow: 0 0 0 3px rgba(252,186,3,.25);
   }
   
   /* Buttons unify */
   .btn.btn-primary,
   input[type="submit"].btn.btn-primary,
   input.action-button,
   input.ccalc{
     background: var(--brand-gold) !important;
     color: #000 !important;
     border: 0 !important;
     border-radius: 14px !important;
     padding: 10px 16px !important;
     font-weight: 700 !important;
     box-shadow: 0 8px 18px rgba(0,0,0,.14);
   }
   .btn.btn-primary:hover,
   input[type="submit"].btn.btn-primary:hover,
   input.action-button:hover,
   input.ccalc:hover{
     background: var(--brand-gold-hover) !important;
   }
   
   /* Small helper grid like XXL */
   .row-tight{
     margin-left: -8px;
     margin-right: -8px;
   }
   .row-tight > [class*="col-"]{
     padding-left: 8px;
     padding-right: 8px;
   }
   
   /* Packaging cards keep your existing classes but make them consistent */
   .packaging-grid .pack-card{
     border-radius: 18px;
     box-shadow: 0 8px 24px rgba(0,0,0,.06);
     border: 1px solid rgba(0,0,0,.06);
   }
   .pack-card.warning{
     border-left: 6px solid #c0392b;
   }
   
   /* Responsive input widths */
   @media (max-width: 768px){
     .input-line{ width: 100% !important; }
   }
   
   
   
   /* =========================================================
      HOME.CSS – GLOBAL UI SYSTEM (append to END of home.css)
      Goal: egységes kinézet (XXL-stílus), stabil form UI, CRO.
      ========================================================= */
   
   /* ---------- Design tokens ---------- */
   :root{
     --navy:#0e4a6b;
     --navy-2:#0b3a55;
     --gold:#fcba03;
     --gold-2:#e0a702;
     --bg:#ffffff;
     --text:#0f172a;
     --muted:#64748b;
     --line:#e7edf3;
     --soft:#f6f8fb;
     --danger:#dc2626;
   
     --radius:18px;
     --radius-sm:12px;
     --shadow:0 10px 24px rgba(2, 12, 27, .08);
     --shadow-sm:0 6px 16px rgba(2, 12, 27, .08);
   
     --pad:18px;
     --pad-lg:24px;
   
     --max:1100px;
   }
   
   /* ---------- Base safety ---------- */
   html{ scroll-behavior:smooth; }
   body{
     color:var(--text);
     background:var(--bg);
     -webkit-font-smoothing:antialiased;
     -moz-osx-font-smoothing:grayscale;
   }
   
   /* Bootstrap/legacy overrides – keep modest */
   img{ max-width:100%; height:auto; }
   
   /* ---------- Layout helpers ---------- */
   .container{
     max-width:var(--max);
   }
   
   .section,
   .service-grid-section,
   .service-section,
   .seo-text{
     width:100%;
   }
   
   .service-section{
     padding: 28px 0;
   }
   
   /* ---------- Headings + lead ---------- */
   .hero{
     max-width:var(--max);
     margin: 0 auto;
     padding: 26px 16px 10px 16px;
   }
   .hero h1,
   .hero h2{
     color:var(--navy);
     font-weight:800;
     letter-spacing:.2px;
     margin: 0 0 8px 0;
   }
   .hero p{
     color:var(--muted);
     margin: 0 0 8px 0;
     line-height:1.55;
   }
   
   /* ---------- Card system (form-card, pack-card, seo-card, etc.) ---------- */
   .form-card,
   .pack-card,
   .seo-card,
   .seo3-card{
     background:#fff;
     border:1px solid var(--line);
     border-radius:var(--radius);
     box-shadow:var(--shadow-sm);
   }
   
   .form-card{
     padding: var(--pad-lg);
   }
   
   .pack-card,
   .seo-card,
   .seo3-card{
     padding: var(--pad);
   }
   
   .pack-card h3,
   .seo-card h3,
   .seo3-card h3{
     margin:0 0 8px 0;
     font-weight:800;
     color:var(--navy);
   }
   .pack-card p,
   .seo-card p,
   .seo3-card p{
     margin:0;
     color:#334155;
     line-height:1.55;
   }
   
   .pack-card.warning,
   .seo3-card.warning{
     border-color: rgba(220,38,38,.25);
   }
   
   /* ---------- Service cards (index kártyák) ---------- */
   .service-grid{
     max-width:var(--max);
     margin: 0 auto;
     padding: 16px;
     display:grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 14px;
   }
   
   @media (max-width: 992px){
     .service-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
   }
   @media (max-width: 576px){
     .service-grid{ grid-template-columns: 1fr; }
   }
   
   .service-card{
     display:block;
     text-decoration:none !important;
     background:#fff;
     border:1px solid var(--line);
     border-radius:var(--radius);
     box-shadow:var(--shadow-sm);
     padding: 18px;
     transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
     color:inherit;
   }
   .service-card:hover{
     transform: translateY(-2px);
     box-shadow:var(--shadow);
     border-color: rgba(14,74,107,.25);
   }
   .service-card h2{
     font-size:18px;
     margin: 10px 0 6px 0;
     font-weight:900;
     color:var(--navy);
   }
   .service-card p{
     margin:0;
     color:var(--muted);
     line-height:1.5;
   }
   .service-card .icon{
     width:44px;
     height:44px;
     display:inline-flex;
     align-items:center;
     justify-content:center;
     border-radius:14px;
     background: rgba(252,186,3,.16);
     color: var(--navy);
   }
   .service-card svg{
     width:22px;
     height:22px;
     fill:none;
     stroke: currentColor;
   }
   
   /* ---------- Forms: consistent inputs/selects ---------- */
   input[type="text"],
   input[type="number"],
   input[type="email"],
   input[type="tel"],
   select,
   textarea{
     border-radius: 12px;
     border: 1px solid var(--line);
     background: #fff;
     color: var(--text);
     outline: none;
     box-sizing:border-box;
   }
   
   input[type="text"]:focus,
   input[type="number"]:focus,
   input[type="email"]:focus,
   input[type="tel"]:focus,
   select:focus,
   textarea:focus{
     border-color: rgba(14,74,107,.35);
     box-shadow: 0 0 0 4px rgba(14,74,107,.10);
   }
   
   label{
     color:#334155;
     font-weight:700;
   }
   
   /* Your custom "input-line" used in new pages */
   .input-line{
     width:100% !important;
     padding: 10px 12px !important;
     border: 1px solid var(--line) !important;
     background: #fff !important;
     border-radius: 12px !important;
   }
   
   /* Legacy inline styles you have: keep look but unify */
   form .form-control{
     border-radius: 12px !important;
   }
   
   /* Make selects look consistent even if inline style exists */
   select{
     padding: 10px 12px;
   }
   
   /* ---------- Required validation visibility ---------- */
   input:required:invalid,
   select:required:invalid,
   textarea:required:invalid{
     border-color: rgba(220,38,38,.35);
   }
   input:required:invalid:focus,
   select:required:invalid:focus,
   textarea:required:invalid:focus{
     box-shadow: 0 0 0 4px rgba(220,38,38,.10);
   }
   
   /* ---------- Buttons (one system) ---------- */
   .btn,
   button,
   input[type="submit"],
   input.action-button,
   input.ccalc{
     border-radius: 14px !important;
     font-weight: 900 !important;
     letter-spacing: .2px;
   }
   
   /* Primary gold everywhere */
   .btn-primary,
   button.btn-primary,
   input[type="submit"].btn,
   input[type="submit"].btn-primary,
   input.action-button,
   input.ccalc{
     background: var(--gold) !important;
     background-color: var(--gold) !important;
     border: 0 !important;
     color:#111 !important;
     box-shadow: 0 10px 18px rgba(252,186,3,.22) !important;
   }
   .btn-primary:hover,
   button.btn-primary:hover,
   input[type="submit"].btn-primary:hover,
   input.action-button:hover,
   input.ccalc:hover{
     background: var(--gold-2) !important;
     background-color: var(--gold-2) !important;
   }
   
   /* Outline dark used by export/import tabs */
   .btn-outline-dark{
     border:1px solid rgba(15,23,42,.22) !important;
     color:#0f172a !important;
     background:#fff !important;
   }
   .btn-outline-dark:hover{
     border-color: rgba(14,74,107,.35) !important;
     color: var(--navy) !important;
   }
   
   /* ---------- International tabs alignment ---------- */
   .intl-choice{
     display:flex;
     gap:10px;
     flex-wrap:wrap;
   }
   
   /* ---------- Packaging grid (your new sections) ---------- */
   .packaging-grid{
     display:grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 14px;
     margin-top: 14px;
   }
   @media (max-width: 992px){
     .packaging-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
   }
   @media (max-width: 576px){
     .packaging-grid{ grid-template-columns: 1fr; }
   }
   
   /* ---------- SEO blocks (dark/gold) ---------- */
   .seo-block{
     border-radius: var(--radius);
     padding: 22px 16px;
     border:1px solid var(--line);
     box-shadow:var(--shadow-sm);
   }
   .seo-block--dark{
     background: var(--navy);
     color:#fff;
     border-color: rgba(255,255,255,.12);
   }
   .seo-block--dark h2,
   .seo-block--dark h3,
   .seo-block--dark p{
     color:#fff;
   }
   .seo-block--dark p{ opacity:.92; }
   
   .seo-block--gold{
     background: var(--gold);
     border-color: rgba(0,0,0,.08);
   }
   .seo-block--gold h2,
   .seo-block--gold h3{
     color:#0b2233;
   }
   .seo-block--gold p{
     color:#0b2233;
     opacity:.9;
   }
   
   /* Bullet rows inside SEO blocks */
   .seo-bullets{ margin-top: 12px; display:grid; gap: 12px; }
   .seo-bullet{
     display:flex;
     gap: 12px;
     align-items:flex-start;
   }
   .seo-bullet__icon{
     width: 34px;
     height: 34px;
     border-radius: 12px;
     display:flex;
     align-items:center;
     justify-content:center;
     background: rgba(255,255,255,.14);
     flex: 0 0 auto;
     font-size: 16px;
   }
   .seo-block--gold .seo-bullet__icon{
     background: rgba(14,74,107,.12);
   }
   
   /* ---------- Fix: legacy inline <p> behaving weird in forms ---------- */
   #gumi_form p,
   #paletta_form p,
   #form-export p,
   #form-import p{
     display:block !important;
     width:100% !important;
   }
   
   /* ---------- Safety: "hidden" should ALWAYS hide (needed for legacy CSS fights) ---------- */
   [hidden]{ display:none !important; }
   
   /* ---------- Reduce visual noise on HR ---------- */
   hr{
     border:0;
     height:1px;
     background: rgba(148,163,184,.35);
     margin: 18px 0;
   }
   
   /* ---------- Small typography polish ---------- */
   h2{ font-weight:900; }
   h3{ font-weight:900; }
   p{ line-height:1.6; }
   
   /* =========================================
      TRUST PANEL – KONTRASZT & OLVASHATÓSÁG
      ========================================= */
   
   .trust-panel,
   .trust,
   .trust-box{
     background: var(--navy) !important;
     color: #fff !important;
     border-radius: var(--radius);
     padding: 22px 16px;
     box-shadow: var(--shadow);
   }
   
   /* Headline */
   .trust-panel h2,
   .trust-panel h3,
   .trust h2,
   .trust h3{
     color: #fff !important;
     font-weight: 900;
   }
   
   /* Text */
   .trust-panel p,
   .trust p{
     color: rgba(255,255,255,.92) !important;
   }
   
   /* Trust items grid */
   .trust-items{
     display:grid;
     grid-template-columns: repeat(3, minmax(0,1fr));
     gap: 16px;
     margin-top: 14px;
   }
   
   @media (max-width: 768px){
     .trust-items{
       grid-template-columns: 1fr;
     }
   }
   
   /* Individual trust card */
   .trust-item{
     display:flex;
     gap: 12px;
     align-items:flex-start;
     background: rgba(255,255,255,.08);
     border-radius: 14px;
     padding: 14px;
   }
   
   /* Icon */
   .trust-item .icon,
   .trust-item__icon{
     width: 40px;
     height: 40px;
     border-radius: 14px;
     display:flex;
     align-items:center;
     justify-content:center;
     background: var(--gold);
     color: #111;
     flex: 0 0 auto;
     box-shadow: 0 6px 14px rgba(252,186,3,.35);
   }
   
   /* Icon svg */
   .trust-item svg{
     width: 20px;
     height: 20px;
     stroke: currentColor;
   }
   
   /* Text next to icon */
   .trust-item strong{
     color:#fff;
     font-weight:900;
     display:block;
     margin-bottom:2px;
   }
   .trust-item span,
   .trust-item p{
     color: rgba(255,255,255,.88);
     margin:0;
   }
   /* =========================================
      FOOTER TRUST BAR – KONTRASZT FIX
      ========================================= */
   
   /* Ha van külön footer trust wrapper */
   footer .trust,
   footer .trust-bar,
   footer .trust-panel,
   footer .trustbox,
   footer .footer-trust{
     background: var(--navy) !important;
     color: #fff !important;
     border-top: 1px solid rgba(255,255,255,.12);
     padding: 22px 16px;
   }
   
   /* Szövegek */
   footer .trust h2,
   footer .trust h3,
   footer .trust strong{
     color:#fff !important;
     font-weight:900;
   }
   
   footer .trust p,
   footer .trust span{
     color: rgba(255,255,255,.9) !important;
   }
   
   /* Trust elemek (ikon + szöveg) */
   footer .trust-item,
   footer .trust-box,
   footer .trust-col{
     display:flex;
     align-items:center;
     gap: 10px;
     background: rgba(255,255,255,.08);
     border-radius: 14px;
     padding: 10px 12px;
   }
   
   /* Ikonok */
   footer .trust-item .icon,
   footer .trust-item svg,
   footer .trust-icon{
     color: #111 !important;
     background: var(--gold);
     border-radius: 12px;
     padding: 8px;
     box-shadow: 0 6px 14px rgba(252,186,3,.35);
   }
   
   /* Ha SVG */
   footer .trust-item svg{
     width:18px;
     height:18px;
     stroke: currentColor;
   }
   
   /* Grid / sor */
   footer .trust-items{
     display:grid;
     grid-template-columns: repeat(3, minmax(0,1fr));
     gap: 14px;
     max-width: var(--max);
     margin: 0 auto;
   }
   
   @media (max-width: 768px){
     footer .trust-items{
       grid-template-columns: 1fr;
     }
   }
   /* =========================================
      FOOTER TRUST – ALOLDAL FIX
      Indexen már jó, aloldalakon kényszerítjük
      ========================================= */
   
   /* Aloldalak: ha NEM index */
   body:not(.home):not(.index):not(.landing) footer .trust,
   body:not(.home):not(.index):not(.landing) footer .trust-bar,
   body:not(.home):not(.index):not(.landing) footer .trust-panel,
   body:not(.home):not(.index):not(.landing) footer .footer-trust{
     background: var(--navy) !important;
     color: #fff !important;
     border-top: 1px solid rgba(255,255,255,.12);
   }
   
   /* Szöveg */
   body:not(.home):not(.index):not(.landing) footer .trust p,
   body:not(.home):not(.index):not(.landing) footer .trust span,
   body:not(.home):not(.index):not(.landing) footer .trust strong{
     color: rgba(255,255,255,.92) !important;
   }
   
   /* Ikon */
   body:not(.home):not(.index):not(.landing) footer .trust .icon,
   body:not(.home):not(.index):not(.landing) footer .trust svg{
     background: var(--gold) !important;
     color:#111 !important;
   }
   /* =========================================
      FOOTER TRUST – HARD FIX (no CSS vars)
      Works even if :root vars missing on subpages
      ========================================= */
   
   footer [class*="trust"],
   #footer [class*="trust"],
   .site-footer [class*="trust"],
   .footer [class*="trust"],
   body [class*="footer"] [class*="trust"]{
     background: #0e4a6b !important;
     color: #ffffff !important;
     border-top: 1px solid rgba(255,255,255,.12) !important;
   }
   
   /* Text inside */
   footer [class*="trust"] h1,
   footer [class*="trust"] h2,
   footer [class*="trust"] h3,
   footer [class*="trust"] p,
   footer [class*="trust"] span,
   footer [class*="trust"] strong,
   #footer [class*="trust"] h1,
   #footer [class*="trust"] h2,
   #footer [class*="trust"] h3,
   #footer [class*="trust"] p,
   #footer [class*="trust"] span,
   #footer [class*="trust"] strong{
     color: #ffffff !important;
   }
   
   /* Icons (emoji / svg / i) */
   footer [class*="trust"] .icon,
   footer [class*="trust"] svg,
   footer [class*="trust"] i,
   #footer [class*="trust"] .icon,
   #footer [class*="trust"] svg,
   #footer [class*="trust"] i{
     background: #fcba03 !important;
     color: #111111 !important;
     border-radius: 12px !important;
     padding: 8px !important;
     box-shadow: 0 6px 14px rgba(252,186,3,.35) !important;
   }
   
   /* Ensure hidden stays hidden (legacy overrides) */
   [hidden]{ display:none !important; }
   #footer-trust{
     background:#0e4a6b !important;
     color:#fff !important;
   }
   /* csomag.php hero szöveg kontraszt fix */
   .service-grid-section .hero {
     background: #f4ecdf; /* ugyanaz a bézs vonal, amit több helyen használsz */
   }
   
   .service-grid-section .hero h1,
   .service-grid-section .hero p,
   .service-grid-section .hero h6 {
     color: #1e2530 !important; /* sötét, olvasható */
   }
   
   .service-grid-section .hero p {
     max-width: 980px;
     margin-left: auto;
     margin-right: auto;
     line-height: 1.7;
   }
   /* ===== HEADER – light info bar ===== */
   /* finomítsuk az info bar kinézetét */
   .mini-header .header-top-info{
     background: linear-gradient(
       180deg,
       rgba(29,111,220,0.04) 0%,
       rgba(29,111,220,0.02) 100%
     );
     border-top: none;               /* ezt vedd ki */
     border-bottom: 1px solid rgba(29,111,220,0.12);
     padding: 6px 12px 7px;
   }
   .mini-header .header-contact a:last-child{
     font-weight: 600;
   }
   
   
   .mini-header .header-usps span{
     margin-right: 14px;
     white-space: nowrap;
   }
   .mini-header .header-usps span{
     display: inline-flex;
     align-items: center;
     gap: 6px;
   }
   
   .mini-header .header-top-info{
     align-items: center;
   }
   
   
   .mini-header .header-contact{
     display: inline-flex;
     align-items: center;
     gap: 12px;
   }
   
   .mini-header .header-contact a{
     color: #1d6fdc;
     text-decoration: none;
     font-weight: 500;
   }
   .mini-header .header-contact a:hover{
     text-decoration: underline;
   }
   
   .mini-header .header-contact .sep{
     margin: 0 6px;
     color: #9ca3af;
   }
   .mini-header .header-top-info{
     padding: 4px 12px 5px !important;
     font-size: 12.5px;
   }
   
   /* mobil: csak a kontakt marad */
   @media (max-width: 768px){
     .mini-header .header-usps{
       display: none;
     }
   }
   /* ===== FOOTER ===== */
   .site-footer{
     margin-top: 40px;
     background: linear-gradient(180deg, rgba(29,111,220,0.06) 0%, rgba(29,111,220,0.02) 60%, #f8fafc 100%);
     border-top: 1px solid rgba(29,111,220,0.12);
   }
   
   .site-footer .footer-inner{
     max-width: 1180px;
     margin: 0 auto;
     padding: 22px 16px 14px;
   }
   
   .site-footer .footer-grid{
     display: grid;
     grid-template-columns: 1.2fr 1fr 1fr;
     gap: 18px;
     padding: 14px 0 18px;
   }
   
   .site-footer .footer-title{
     font-weight: 800;
     color: #0b1b2a;
     margin-bottom: 10px;
   }
   
   .site-footer .footer-text{
     font-size: 13px;
     color: rgba(11,27,42,0.75);
     line-height: 1.55;
   }
   
   .site-footer a{
     color: #1d6fdc;
     text-decoration: none;
     font-weight: 600;
   }
   .site-footer a:hover{ text-decoration: underline; }
   
   .site-footer .footer-links{
     list-style: none;
     margin: 0;
     padding: 0;
   }
   .site-footer .footer-links li{
     margin: 0 0 8px 0;
   }
   .site-footer .footer-muted{
     margin-top: 8px;
     opacity: .85;
   }
   
   .site-footer .footer-bottom{
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 12px;
     border-top: 1px solid rgba(29,111,220,0.12);
     padding-top: 12px;
     font-size: 12.5px;
     color: rgba(11,27,42,0.65);
   }
   
   .site-footer .footer-badges{
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     color: rgba(11,27,42,0.70);
   }
   .site-footer .footer-badges span{
     white-space: nowrap;
   }
   
   /* mobil */
   @media (max-width: 768px){
     .site-footer .footer-grid{
       grid-template-columns: 1fr;
     }
     .site-footer .footer-bottom{
       flex-direction: column;
       align-items: flex-start;
     }
   }
   /* linkes footer rész finom kék háttér */
   .site-footer{
     background: linear-gradient(
       180deg,
       rgba(29,111,220,0.05) 0%,
       rgba(29,111,220,0.02) 60%,
       #f8fafc 100%
     ) !important;
   }
   .site-footer .footer-inner{
     padding: 14px 16px 10px !important;
   }
   
   .site-footer .footer-grid{
     padding: 10px 0 14px !important;
   }
   /* bizalmi sáv alatti elválasztás */
   .footer-trust,
   .trust-bar{
     margin-bottom: 8px !important;
     box-shadow: inset 0 -1px 0 rgba(255,255,255,0.25);
   }
   .site-footer .footer-bottom,
   .site-footer .legal-bar{
     background: rgba(0,0,0,0.04) !important;
     border-top: 1px solid rgba(29,111,220,0.12) !important;
     padding: 8px 16px !important;
   }
   
   .site-footer .footer-grid{
     padding: 6px 0 10px !important;
   }
   
   .site-footer .footer-title{
     margin-bottom: 8px !important;
   }
   .site-footer .footer-col:nth-child(2),
   .site-footer .footer-col:nth-child(3){
     margin-top: 4px;
   }
   /* ===== RÉGI SÖTÉTKÉK HOME HÁTTÉR ===== */
   body.home,
   .home{
     background-color: #0e4a6b !important; /* RÉGI sötétkék */
   }