/* konverter.rs — deljeni CSS (ne-kritičan deo, keširan eksterno).
   Kritični CSS (root varijable, reset, header, hero, forma konvertera,
   rezultat) ostaje inline u partials/head.php. */

/* Kartice / opšti sadržaj (.card i .page-card ostaju samo inline u head.php,
   jer se element = "card page-card" oslanja na njihov redosled u istom stylesheetu) */
.grid-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.grid-links a{display:block;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;text-align:center;font-weight:500;color:#111;transition:all .2s}
.grid-links a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.ad{border:1px dashed var(--border);border-radius:var(--radius);text-align:center;color:var(--muted);font-size:.9rem;padding:10px;margin:20px 0;min-height:90px;display:none}

/* Info tooltip */
.info-tooltip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:6px;border-radius:50%;background:rgba(18,97,181,.12);color:var(--accent);font-size:.8rem;font-weight:700;cursor:pointer;transition:background .2s,color .2s}
.info-tooltip:hover,
.info-tooltip:focus-within{background:var(--accent);color:#fff}
.info-tooltip__icon{line-height:1}
.info-tooltip__content{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);min-width:190px;max-width:260px;background:#fff;color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:10px;font-size:.85rem;line-height:1.4;box-shadow:0 10px 24px rgba(17,17,17,.12);opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease;pointer-events:none;z-index:20}
.info-tooltip:focus-within .info-tooltip__content,
.info-tooltip:hover .info-tooltip__content{opacity:1;visibility:visible;transform:translate(-50%,0)}
.info-tooltip__content::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);border-width:6px;border-style:solid;border-color:transparent transparent #fff transparent}
@media (max-width:600px){
  .info-tooltip__content{left:auto;right:0;transform:none}
  .info-tooltip:hover .info-tooltip__content,
  .info-tooltip:focus-within .info-tooltip__content{transform:none}
}

/* Sidebar */
.sidebar{display:flex;flex-direction:column;gap:16px}
.sidebar .card{margin-bottom:0}
.sidebar-links{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.sidebar-links a{color:#111;font-weight:500}
.sidebar-links a:hover{color:var(--accent)}
.sidebar .ad{margin:0}
.unit-list{margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.unit-item{display:flex;align-items:center;gap:8px;padding:4px 8px;font-size:.85rem;line-height:1.3;border-radius:4px;background:rgba(18,97,181,.04);border-left:2px solid rgba(18,97,181,.2)}
.unit-item:hover{background:rgba(18,97,181,.08);border-left-color:var(--accent)}
.sidebar-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:var(--pad);margin-bottom:16px}
.sidebar-card h3{color:var(--accent-dark);margin-bottom:12px;font-size:1.1rem}
.sidebar-card h4{color:var(--accent);margin:16px 0 8px;font-size:1rem}
.sidebar-card p{margin:8px 0;font-size:.9rem;line-height:1.4}
.sidebar-card ul{margin:8px 0;padding-left:18px}
.sidebar-card li{margin-bottom:4px;font-size:.9rem}
.unit-info{margin:12px 0;padding-bottom:12px;border-bottom:1px solid #f0f0f0}
.unit-info:last-child{border-bottom:none}

/* Breadcrumb */
.breadcrumb-trail{background:#f9fafb;border-bottom:1px solid var(--border);text-align:left;display:block}
.breadcrumb-inner{max-width:var(--max);margin:0 auto;padding:10px var(--pad)}
.breadcrumb-inner ol{margin:0;padding:0;list-style:none}
.breadcrumb-inner li{display:inline;font-size:.9rem;color:var(--muted)}
.breadcrumb-inner li:last-child{color:var(--fg)}
.breadcrumb-inner .sep{margin:0 6px;color:var(--fg);font-weight:500}
.breadcrumb-inner a{color:var(--accent);text-decoration:none;padding:0;background:none;border-radius:0}
.breadcrumb-inner a:hover{color:var(--accent);text-decoration:underline;background:none}

/* Footer */
footer{background:#f3f4f6;text-align:center;color:var(--muted);font-size:.9rem;padding:26px 14px;margin-top:40px}
footer nav{display:block;width:100%}
footer .links{margin-bottom:10px}
footer a{color:var(--accent-dark);font-size:120%}
footer .links a{color:var(--accent-dark);margin:0 6px}
footer .links a:hover{text-decoration:underline}
footer p{max-width:700px;margin:10px auto;line-height:1.4}

/* Cookie banner */
#cookieConsent{display:none;position:fixed;bottom:0;left:0;right:0;background:#001a3f;color:#fff;text-align:center;padding:14px 10px;font-size:.9rem;z-index:999}
#cookieConsent button{margin-left:10px;padding:6px 12px;background:#fff;color:#001a3f;border:none;border-radius:4px;font-weight:600;cursor:pointer}
#cookieConsent button:hover{background:#e6efff}

/* Početna strana — kategorije i "kako funkcioniše" */
.converter-categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:20px 0}
.category-item{border-radius:12px;transition:all .2s ease}
.category-item a{display:block;padding:20px;text-align:center;text-decoration:none;color:inherit;border:1px solid var(--border);border-radius:12px;background:#fff;transition:all .2s ease}
.category-item a:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(18,97,181,.15);border-color:var(--accent);text-decoration:none}
.category-icon{font-size:2.5rem;margin-bottom:12px;line-height:1}
.category-item h3{font-size:1.1rem;color:var(--accent-dark);margin:8px 0;font-weight:600}
.category-item p{font-size:.85rem;color:var(--muted);margin:0;line-height:1.4}
.how-it-works{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:20px 0}
.step{text-align:center;padding:16px}
.step-icon{font-size:2.5rem;margin-bottom:12px;line-height:1}
.step h3{font-size:1rem;color:var(--accent-dark);margin:12px 0 8px;font-weight:600}
.step p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.4}
.features{background:rgba(18,97,181,.05);padding:16px;border-radius:8px;margin-top:20px;line-height:1.6;border-left:4px solid var(--accent)}
.seo-features{margin:24px 0}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:16px}
.feature{display:flex;gap:12px;align-items:flex-start}
.feature-icon{font-size:1.5rem;line-height:1;margin-top:2px}
.feature h3{font-size:.95rem;color:var(--accent-dark);margin:0 0 6px;font-weight:600}
.feature p{font-size:.85rem;color:var(--muted);margin:0;line-height:1.4}

/* Sve konverzije sekcija */
.all-conversions{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:24px 0}
.conversion-group{background:#f9fafb;border:1px solid var(--border);border-radius:12px;padding:16px}
.conversion-group h3{color:var(--accent-dark);margin:0 0 12px;font-size:1rem;font-weight:600;display:flex;align-items:center;gap:8px}
.conversion-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px}
.conversion-links a{display:block;padding:8px 10px;background:#fff;border:1px solid var(--border);border-radius:6px;text-align:center;font-size:.85rem;color:var(--accent);text-decoration:none;transition:all .2s ease}
.conversion-links a:hover{background:var(--accent);color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px rgba(18,97,181,.2)}

/* FAQ */
.faq-item{margin-bottom:24px;padding:20px;border:1px solid var(--border);border-radius:12px;background:#fff;transition:box-shadow .2s}
.faq-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.05)}
.faq-item h3{color:var(--accent-dark);margin:0 0 12px 0;font-size:1.1rem;line-height:1.4}
.faq-item p{margin:8px 0;line-height:1.6}
.faq-item p:last-child{margin-bottom:0}
.faq-item strong{color:var(--accent-dark);font-weight:600}

/* Zapremina — dvokolonska tabela jedinica */
.two-column-table{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}
.two-column-table .column{display:flex;flex-direction:column;gap:16px}
.two-column-table .unit-info{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:16px}
.two-column-table .unit-info h3{color:var(--accent-dark);margin:0 0 8px 0;font-size:1.1rem}
.two-column-table .unit-info p{margin:0;color:var(--fg);line-height:1.5;font-size:.95rem}
@media (max-width:768px){
  .two-column-table{grid-template-columns:1fr;gap:16px}
}

/* Prevodi — alat za .srt titlove */
.subtitle-tool{display:flex;flex-direction:column;gap:14px}
.subtitle-tool .field{display:flex;flex-direction:column;gap:6px}
.subtitle-tool label{font-weight:600;color:var(--accent-dark)}
.subtitle-tool input[type="file"],.subtitle-tool select{padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:1rem;background:#fff}
.subtitle-tool textarea{min-height:210px;padding:12px;border:1px solid var(--border);border-radius:10px;font-size:.95rem;line-height:1.45;font-family:Menlo,Consolas,monospace;background:#fff}
.subtitle-tool textarea:focus,.subtitle-tool select:focus,.subtitle-tool input[type="file"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,97,181,.12)}
.subtitle-tool .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.subtitle-tool .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.subtitle-tool .primary-btn{background:var(--accent);color:#fff;border:none;padding:12px 18px;border-radius:10px;font-weight:700;cursor:pointer;transition:background .2s}
.subtitle-tool .primary-btn:hover{background:var(--accent-dark)}
.subtitle-tool .ghost-btn{background:#fff;color:var(--accent);border:1px solid var(--accent);padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.subtitle-tool .ghost-btn:hover{background:rgba(18,97,181,.08)}
.subtitle-tool .muted{color:var(--muted);font-size:.92rem}
.alert{border-radius:10px;padding:12px 14px;margin:10px 0;font-weight:600}
.alert.error{background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.4);color:#7f1d1d}
.alert.success{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.4);color:#065f46}
.result-card{margin-top:18px}
.result-card textarea{min-height:260px}
.download-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.download-actions .download-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;padding:12px 16px;border-radius:10px;font-weight:700;text-decoration:none;border:1px solid var(--accent)}
.download-actions .download-btn:hover{background:var(--accent-dark);text-decoration:none}
.download-actions .ghost-btn{background:#fff;color:var(--accent);border:1px solid var(--accent);padding:12px 16px;border-radius:10px;font-weight:700;cursor:pointer;transition:background .2s,color .2s}
.download-actions .ghost-btn:hover{background:rgba(18,97,181,.08)}
.subtitle-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:16px}
.note{border:1px solid var(--border);border-radius:10px;padding:12px;background:#fafafa}
.note h3{margin-bottom:8px;color:var(--accent-dark)}
.note pre{background:#111;color:#fff;padding:10px;border-radius:8px;font-size:.85rem;overflow:auto;margin:6px 0 0}
@media (max-width:700px){
  .subtitle-tool textarea,.result-card textarea{min-height:200px}
}

/* Error stranice (404/500) */
.error-page{text-align:center;padding:40px 20px}
.error-page h1{font-size:3rem;color:var(--accent);margin-bottom:20px}
.error-page .error-code{font-size:6rem;font-weight:800;color:var(--muted);margin-bottom:20px}
.error-page .actions{margin-top:30px;display:flex;gap:15px;justify-content:center;flex-wrap:wrap}
.error-page .btn{padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;transition:all .2s}
.error-page .btn-primary{background:var(--accent);color:#fff}
.error-page .btn-primary:hover{background:var(--accent-dark)}
.error-page .btn-secondary{border:1px solid var(--border);color:var(--fg);background:#fff}
.error-page .btn-secondary:hover{border-color:var(--accent);background:rgba(18,97,181,.08)}
@media (max-width:600px){
  .error-page .error-code{font-size:4rem}
  .error-page h1{font-size:2rem}
  .error-page .actions{flex-direction:column}
}

@media (max-width:600px){
  .converter-categories{grid-template-columns:repeat(2,1fr);gap:12px}
  .category-item a{padding:16px}
  .category-icon{font-size:2rem}
  .how-it-works{grid-template-columns:1fr;gap:16px}
  .feature-row{grid-template-columns:1fr;gap:12px}
  .all-conversions{grid-template-columns:1fr;gap:16px}
  .conversion-links{grid-template-columns:repeat(3,1fr);gap:6px}
  .faq-item{padding:16px;margin-bottom:16px}
  .faq-item h3{font-size:1rem}
}