/* =======================
   PEPPOL – base look
   ======================= */
:root{
    --accent:#1a73e8;              /* Google-like blue */
    --accent-hover:#1669d2;
    --ring: rgba(26,115,232,.25);
    --muted:#6b7280;
    --ctl-h:56px;                   /* jednotná výška ovládacích prvkov */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    background:#fff;
    color:#111827;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* =======================
   Top links (right corner)
   ======================= */
.pep-top{ padding-block:.75rem; }
.pep-top a{
    font-size:.95rem; color:#111827; opacity:.85; text-decoration:none;
}
.pep-top a:hover{ opacity:1; text-decoration:underline; }
.pep-top i{ color:#111827; opacity:.75 }

/* =======================
   Hero title
   ======================= */
.pep-hero{ letter-spacing:.5px; font-weight:800; }
.pep-hero img {
    max-height: 80px;
    opacity: .35;
}
.pep-h1 {
    font-size: 1.9rem; /* alebo podľa vkusu */
    line-height: 1.3;
}

.pep-hero { margin-bottom: 1rem; }

/* h1 zjemni – menší, tmavší než text, bez „kriku“ */
.pep-h1{
    font-size: 1.35rem;        /* pôvodne ~1.9rem */
    line-height: 1.35;
    font-weight: 700;          /* nech zostane pevný */
    color: #111827;            /* text-body */
    opacity: .95;              /* jemne tlmene */
    margin-top: .55rem;
}


.pep-sep{
    margin: 2rem auto 1rem;
}

/* =======================
   Search row
   ======================= */
.peppol-search{ max-width:720px; width:100%; }

/* INPUT */
.peppol-input{
    height: var(--ctl-h);
    padding: 0 1.25rem;
    border:1px solid #e5e7eb;
    border-radius:30px;                         /* miernejší oblúk, caret je pekne viditeľný */
    transition: box-shadow .15s ease, border-color .15s ease;
}
.peppol-input:focus{
    border-color: var(--accent);
    box-shadow: 0 0 0 .25rem var(--ring);
}

/* SELECT */
.peppol-select{
    height: var(--ctl-h);
    padding: 0 2.25rem 0 1rem;                  /* priestor pre šípku */
    border:1px solid #e5e7eb;
    border-radius:30px;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.peppol-select:focus{
    border-color: var(--accent);
    box-shadow: 0 0 0 .25rem var(--ring);
}

.input-group .input-group-text{
    height: var(--ctl-h);
    border-radius: 30px 0 0 30px;
    border-right: 0;                 /* zruš dvojitý šev */
}
.input-group .form-select{
    border-left: 0;                  /* zruš dvojitý šev */
}
.form-label.small { font-size: .8rem; color: #b8c2cc; }

.pep-h1 {
    font-size: 1.8rem;         /* menšie ako display-4 (2.5–3rem) */
    line-height: 1.3;
    letter-spacing: .5px;
    color:#111827;
}





@media (min-width: 992px){
    .peppol-select{ width:180px; }              /* zúženie selektu na veľkých displejoch */
    .peppol-input{  border-top-right-radius:0; border-bottom-right-radius:0; }
    .input-group .input-group-text{ border-radius:0; }
    .input-group .form-select{ border-radius:0; }
    .peppol-btn{    border-top-left-radius:0;  border-bottom-left-radius:0; }
}

/* BUTTON (rovnaká výška, menší padding) */
.peppol-btn{
    height: var(--ctl-h);
    border-radius:30px;
    background: var(--accent);
    border-color: var(--accent);
    padding: 0 16px;
    box-shadow: 0 6px 14px rgba(26,115,232,.25);
    display:inline-flex; align-items:center; justify-content:center;
    white-space:nowrap;
    color:#fff;
}
.peppol-btn:hover{
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 8px 18px rgba(26,115,232,.33);
}



/* search header bar (results page) */
header .peppol-input, header .peppol-select, header .peppol-btn {
    height: var(--ctl-h);
}
header .peppol-input { border-radius: 30px; }
header .peppol-select { border-radius: 30px; }
header .peppol-btn { border-radius: 30px; }

/* výsledky */
.peppol-results article a:hover { text-decoration: underline; }

.peppol-btn.disabled {
    opacity: 0.7;
    cursor: not-allowed;
}


.lang-link {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    color: #555;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}

.lang-link:hover {
    background-color: #f0f0f0;
    color: #000;
}

.lang-link.active-lang {
    background-color: #e6e6e6;
    color: #000;
    font-weight: 600;
    cursor: default;
}


/* --- Pill napojenie na veľkých displejoch --- */
@media (min-width: 992px){
    .peppol-input{  border-top-right-radius:0; border-bottom-right-radius:0; }
    .peppol-select{ border-radius:0; }
    .peppol-btn{    border-top-left-radius:0;  border-bottom-left-radius:0; }
}

/* =======================
   Only icon on narrow screens
   (skryj text tlačidla, nechaj iba lupu)
   ======================= */


@media (min-width: 768px) {
    .pep-h1 {
        font-size: 2rem;  /* na väčších displejoch trochu väčšie */
    }
}


@media (min-width:576px){
    .peppol-btn{ font-size:1rem; }
    .peppol-btn i{ font-size:1rem; }            /* zjednotenie s textom */
}

/* =======================
   Languages row
   ======================= */
.peppol-langs{ color:var(--muted); font-size:.95rem; }
.peppol-langs a{
    color:#6b7280; text-decoration:none; display:inline-block;
    padding:.15rem .25rem; border-radius:.35rem;
}
.peppol-langs a:hover{ background:#f3f4f6; color:#111827; text-decoration:none; }

/* =======================
   Collapsible cards
   ======================= */
.card{ border:1px solid #eef2f7; border-radius:12px; }
.card .card-body{ padding:1rem 1.25rem; }
.card h2{ font-weight:600; }

/* =======================
   Main area centering
   ======================= */
.pep-main{
    min-height:60vh;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
}



.peppol-info {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafafa;              /* jemne odlíšené od bieleho pozadia */
    padding: 1.25rem 1.5rem;
    margin-top: .75rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.05); /* decentný tieň */
    transition: all .2s ease-in-out;
}

.peppol-info h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: .5rem;
    color:#111827;
}

.peppol-info p {
    margin-bottom: 0;
    font-size: .95rem;
    line-height: 1.5;
    color:#374151;
}

.peppol-info.show {
    animation: fadeIn .25s ease-in-out;
}

@keyframes fadeIn {
    from {opacity:0; transform: translateY(-4px);}
    to   {opacity:1; transform: translateY(0);}
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #111827;
}