/* ---------------------------------------------------------------------------
   Szablon: SEOsinner  (dla skryptu SEOKatalog 1.5)
   Nowoczesny, przejrzysty layout katalogu stron  -  motyw: granat + cyjan
   Autor: Muventi  |  strona: seosinner.pl
--------------------------------------------------------------------------- */

:root {
   --navy-900:#0c1f3a;
   --navy-800:#132f54;
   --navy-700:#1c4477;
   --accent:#22d3ee;
   --link:#0e7490;
   --link-hover:#0c4a6e;

   --bg:#eef2f6;
   --surface:#ffffff;
   --surface-2:#f4f7fa;
   --border:#e3e8ef;
   --border-strong:#cdd5df;

   --text:#233043;
   --muted:#697586;
   --heading:#0f2c4d;

   --premium-bg:#fff9ec;
   --premium-border:#f2d492;
   --premium-badge:#a16207;

   --radius:16px;
   --radius-sm:10px;
   --shadow-sm:0 1px 2px rgba(15,44,77,.05), 0 1px 3px rgba(15,44,77,.08);
   --shadow-md:0 14px 30px -14px rgba(15,44,77,.28);
   --maxw:1200px;
   --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
   margin:0;
   padding:0;
   font-family:var(--font);
   font-size:15px;
   line-height:1.6;
   color:var(--text);
   background:var(--bg);
   text-align:left;
}

img { border:0; max-width:100%; }
a img { text-decoration:none; }

a { color:var(--link); font-weight:500; text-decoration:none; }
a:hover { color:var(--link-hover); text-decoration:underline; }

h1, h2, h3 { font-family:var(--font); }

form { margin:0; }
center { display:block; }

::selection { background:rgba(34,211,238,.28); }

/* ------------------------------ layout ---------------------------------- */

#wrap {
   max-width:var(--maxw);
   margin:0 auto;
   padding:0 20px 30px;
   text-align:left;
   overflow:visible;
}

/* ------------------------------ header --------------------------------- */

#header {
   background:linear-gradient(135deg, var(--navy-900), var(--navy-700));
   color:#fff;
   width:auto;
   height:auto;
   padding:22px 26px;
   margin-top:20px;
   border-radius:18px;
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:18px 30px;
   flex-wrap:wrap;
   box-shadow:0 16px 34px -16px rgba(12,31,58,.55);
}

#header_left {
   float:none;
   width:auto;
   margin:0;
   padding:0;
   display:flex;
   align-items:center;
   gap:14px;
}

#header_left img { float:none; margin:0; padding:0; }

.brand-mark { display:inline-flex; flex:none; line-height:0; }
.brand-mark svg { display:block; border-radius:12px; box-shadow:0 6px 16px -6px rgba(0,0,0,.4); }

.brand-text { display:flex; flex-direction:column; }

#header_left h1, #header_left h1 a, #header_left h1 a:hover {
   margin:0;
   padding:0;
   float:none;
   font:800 1.55rem/1.15 var(--font);
   letter-spacing:-.01em;
   color:#fff;
   text-decoration:none;
}

#header_left h2 {
   margin:3px 0 0;
   padding:0;
   float:none;
   font:500 .82rem/1.4 var(--font);
   letter-spacing:.005em;
   color:rgba(255,255,255,.72);
}

#header_right { float:none; margin:0; padding:0; }

.search-group {
   display:flex;
   align-items:stretch;
   gap:8px;
   margin:0;
   flex-wrap:wrap;
}

#header_right input[type="text"] {
   font:inherit;
   font-size:.9rem;
   color:var(--text);
   background:#fff;
   border:1px solid transparent;
   border-radius:10px;
   padding:9px 13px;
   min-width:210px;
}
#header_right input[type="text"]:focus {
   outline:none;
   box-shadow:0 0 0 3px rgba(34,211,238,.4);
}

#header_right select {
   font:inherit;
   font-size:.86rem;
   color:var(--text);
   background:#fff;
   border:1px solid transparent;
   border-radius:10px;
   padding:8px 10px;
}

#header_right .button {
   background:var(--accent);
   color:var(--navy-900);
   border-color:var(--accent);
}
#header_right .button:hover { background:#fff; border-color:#fff; }

/* ------------------------------ buttons -------------------------------- */

.button {
   display:inline-block;
   font:600 .9rem/1 var(--font);
   cursor:pointer;
   color:#fff;
   background:var(--link);
   border:1px solid var(--link);
   border-radius:10px;
   padding:11px 20px;
   width:auto;
   height:auto;
   transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.button:hover { background:var(--navy-800); border-color:var(--navy-800); transform:translateY(-1px); }
.button:active { transform:translateY(0); }
.button:disabled, .button[disabled] { opacity:.45; cursor:not-allowed; transform:none; }

/* ------------------------------ menu ---------------------------------- */

#menu {
   background:var(--surface);
   border:1px solid var(--border);
   border-radius:14px;
   width:auto;
   height:auto;
   margin:14px 0 0;
   padding:6px 8px;
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:8px;
   flex-wrap:wrap;
   box-shadow:var(--shadow-sm);
   position:sticky;
   top:10px;
   z-index:30;
   font:inherit;
}

#menu ul {
   list-style:none;
   margin:0;
   padding:0;
   float:none;
   display:flex;
   flex-wrap:wrap;
   gap:2px;
}
#menu ul li { display:inline; }

#menu ul li a {
   display:block;
   float:none;
   width:auto;
   padding:9px 14px;
   border-radius:9px;
   color:var(--muted);
   font-weight:600;
   font-size:.86rem;
   text-decoration:none;
   transition:background .15s ease, color .15s ease;
}
#menu ul li a:hover { background:var(--surface-2); color:var(--heading); text-decoration:none; }
#menu ul li a.select { background:var(--navy-800); color:#fff; }

#menu #lang {
   float:none;
   margin:0;
   padding:0 6px;
   display:flex;
   gap:6px;
   align-items:center;
}
#menu #lang a { display:inline-flex; line-height:0; }
#menu #lang img { display:block; width:22px; height:auto; margin:0; border-radius:3px; opacity:.8; }
#menu #lang a:hover img { opacity:1; }

/* --------------------------- content wrap ----------------------------- */

#content-wrap {
   width:auto;
   padding:0;
   margin:0;
   clear:both;
   display:grid;
   grid-template-columns:minmax(0,1fr) 320px;
   gap:24px;
   align-items:start;
   margin-top:24px;
}

#content-wrap > *:not(#content):not(#sidebar) { grid-column:1 / -1; }

/* ----------------------------- messages ------------------------------- */

#error, #info {
   width:auto;
   margin:0;
   padding:13px 16px 13px 46px;
   border:1px solid;
   border-radius:12px;
   font:500 .9rem/1.5 var(--font);
   text-align:left;
   position:relative;
   background-color:#fff;
}
#error { color:#b42318; background:#fef3f2; border-color:#fda29b; }
#info  { color:#12703a; background:#edfcf2; border-color:#a6e9c1; }
#error::before, #info::before {
   position:absolute;
   left:14px; top:50%;
   transform:translateY(-50%);
   width:22px; height:22px;
   border-radius:50%;
   display:flex; align-items:center; justify-content:center;
   font-size:.8rem; font-weight:700; color:#fff;
}
#error::before { content:"!"; background:#d92d20; }
#info::before  { content:"\2713"; background:#17b26a; }

/* ----------------------------- sidebar ------------------------------- */

#sidebar {
   float:none;
   width:auto;
   margin:0;
   padding:0;
   grid-column:2;
   grid-row:1;
}

#sidebar h3 {
   font:700 .78rem/1.3 var(--font);
   text-transform:uppercase;
   letter-spacing:.07em;
   color:#fff;
   background:var(--navy-800);
   padding:11px 14px;
   margin:18px 0 10px;
   border-radius:10px;
}
#sidebar h3:first-child { margin-top:0; }

#sidebar ul {
   list-style:none;
   margin:0 0 18px;
   padding:5px 5px;
   background:var(--surface);
   border:1px solid var(--border);
   border-radius:12px;
   box-shadow:var(--shadow-sm);
}

#sidebar ul li {
   margin:0;
   list-style:none;
   font:inherit;
   font-size:.85rem;
   color:var(--text);
   border-bottom:1px solid var(--border);
   background:none;
}
#sidebar ul li:last-child { border-bottom:0; }
#sidebar ul li.in, #sidebar ul li.out { background:none; border-bottom:1px solid var(--border); }
#sidebar ul li.in:last-child, #sidebar ul li.out:last-child { border-bottom:0; }

#sidebar ul li a {
   display:block;
   margin:0;
   padding:8px 11px;
   border-radius:7px;
   color:var(--text);
   font:inherit;
   font-size:.85rem;
   font-weight:500;
   text-decoration:none;
   transition:background .15s ease, color .15s ease;
}
#sidebar ul li a:hover { margin:0; background:var(--surface-2); color:var(--link); text-decoration:none; }
#sidebar ul li a.select { color:var(--link); font-weight:700; text-decoration:none; }

#sidebar ul li.out a::before { content:"\2197"; margin-right:6px; color:var(--muted); font-weight:700; }

#sidebar ul li .text { margin:0; padding:8px 11px; font-size:.82rem; color:var(--text); line-height:1.55; }
#sidebar ul li .text b { color:var(--heading); }

#sidebar ul li small { color:var(--muted); font:normal .78rem/1.4 var(--font); }
#sidebar ul li small a { color:var(--muted); font:normal .78rem/1.4 var(--font); display:inline; padding:0; }
#sidebar ul li small a:hover { color:var(--link); text-decoration:underline; }

#sidebar ul li.pr {
   padding:6px 11px;
   height:auto;
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:8px;
}
#sidebar ul li img.pr { float:none; margin:0; padding:0; }
#sidebar ul li .pr_text { float:none; width:auto; text-align:right; }
#sidebar ul li a.pr, #sidebar ul li a.pr:hover {
   display:inline;
   margin:0;
   padding:0;
   text-align:right;
   font-weight:700;
   color:var(--link);
   background:none;
}

/* premium slider box */
#slider {
   padding:10px;
   margin:0 0 10px;
   background:var(--surface);
   border:1px solid var(--border);
   border-radius:12px;
   box-shadow:var(--shadow-sm);
   overflow:hidden;
}
#slider ul { margin:0; padding:0; border:0; background:none; box-shadow:none; list-style:none; }
#sidebar ul li.premium { width:auto; margin:0; padding:0; text-align:center; border:0; }
#sidebar ul li.premium a, #sidebar ul li.premium a:hover { display:block; text-align:center; margin:0; padding:4px 0; font-weight:600; }
img.premium {
   border:1px solid var(--border);
   border-radius:8px;
   padding:0;
   margin:6px auto;
   width:100%;
   max-width:220px;
   height:auto;
   display:block;
}

#sidebar > center { display:block; margin:-8px 0 18px; }
#sidebar > center a {
   display:block;
   text-align:center;
   padding:9px 12px;
   background:var(--surface-2);
   border:1px solid var(--border);
   border-radius:9px;
   color:var(--link);
   font-weight:600;
   font-size:.82rem;
}
#sidebar > center a:hover { background:#fff; text-decoration:none; border-color:var(--border-strong); }

/* ----------------------------- content ------------------------------ */

#content {
   float:none;
   width:auto;
   padding:26px 28px;
   margin:0;
   grid-column:1;
   grid-row:1;
   background:var(--surface);
   border:1px solid var(--border);
   border-radius:var(--radius);
   box-shadow:var(--shadow-sm);
}

#content h1 {
   margin:26px 0 16px;
   font:700 1.18rem/1.35 var(--font);
   color:var(--heading);
   padding:0 0 10px;
   border:0;
   border-bottom:2px solid var(--border);
   background:none;
   clear:both;
   overflow:hidden;
}
#content h1:first-child { margin-top:0; }
#content h1 a { color:var(--heading); font:inherit; text-decoration:none; }
#content h1 a:hover { color:var(--link); text-decoration:underline; }
#content h1 img { margin-top:-2px; }

#content p {
   font:400 .95rem/1.7 var(--font);
   margin:0 0 16px;
   color:var(--text);
   text-align:left;
}
#content p.right { text-align:right; }

#content h3 {
   font:600 .92rem/1.4 var(--font);
   color:var(--heading);
   text-align:left;
   padding:10px 14px;
   margin:22px 0 14px;
   background:var(--surface-2);
   border:1px solid var(--border);
   border-left:3px solid var(--accent);
   border-radius:var(--radius-sm);
   float:none;
   width:auto;
   clear:both;
}
#content h3 a { color:var(--link); font:inherit; text-decoration:none; }
#content h3 a:hover { color:var(--link-hover); text-decoration:underline; }

#content a.sub {
   color:var(--link);
   font:500 .85rem/1.5 var(--font);
   text-decoration:none;
}
#content a.sub:hover { text-decoration:underline; }

/* --- category / subcategory grid --- */

#category { margin:4px 0 6px; }
#category table {
   width:calc(100% + 28px);
   margin:-14px;
   border-collapse:separate;
   border-spacing:14px;
   table-layout:fixed;
}
#category table td {
   vertical-align:top;
   background:var(--surface-2);
   border:1px solid var(--border);
   border-radius:var(--radius-sm);
   padding:14px 16px;
   transition:border-color .15s ease, box-shadow .15s ease;
}
#category table td:hover { border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
#category table td h2 {
   margin:0 0 8px;
   padding:0;
   background:none;
   font:700 .98rem/1.3 var(--font);
}
#category table td h2 a { color:var(--heading); text-decoration:none; }
#category table td h2 a:hover { color:var(--link); }
#category table td small { color:var(--muted); font:400 .8rem/1.4 var(--font); }
#category table td img { float:left; width:34px; height:34px; margin:0 10px 6px 0; border-radius:7px; }
#category a.sub { display:inline-block; margin:3px 8px 3px 0; }

/* --- listing of sites --- */

#content #sites { margin:10px 0 18px; }
#content #sites ul {
   list-style:none;
   padding:0;
   margin:0;
   float:none;
   width:auto;
   display:flex;
   flex-direction:column;
   gap:12px;
}
#content #sites ul li {
   position:relative;
   list-style:none;
   margin:0;
   padding:15px 17px;
   background:var(--surface);
   border:1px solid var(--border);
   border-left:3px solid var(--border-strong);
   border-radius:var(--radius-sm);
   transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
#content #sites ul li:hover {
   border-left-color:var(--accent);
   box-shadow:var(--shadow-md);
   transform:translateY(-1px);
}
#content #sites ul li.premium {
   background:var(--premium-bg);
   border-color:var(--premium-border);
   border-left-color:var(--premium-badge);
}
#content #sites ul li.premium::after {
   content:"PREMIUM";
   position:absolute;
   top:13px;
   right:15px;
   font:700 .6rem/1 var(--font);
   letter-spacing:.09em;
   color:var(--premium-badge);
   background:rgba(161,98,7,.1);
   border:1px solid var(--premium-border);
   padding:3px 8px;
   border-radius:999px;
}
#content #sites h2 {
   margin:0 0 6px;
   padding:0;
   background:none;
   font:700 1rem/1.35 var(--font);
}
#content #sites h2 a { color:var(--heading); text-decoration:none; }
#content #sites h2 a:hover { color:var(--link); text-decoration:none; }
#content #sites p {
   font:400 .92rem/1.65 var(--font);
   margin:0 0 8px;
   color:var(--text);
   text-align:left;
}
#content #sites small {
   color:var(--muted);
   font:400 .8rem/1.5 var(--font);
   display:block;
   width:auto;
}
#content #sites small a { color:var(--muted); text-decoration:none; }
#content #sites small a:hover { color:var(--link); text-decoration:underline; }

#content #sites small.right {
   text-align:right;
   float:none;
   width:auto;
   display:block;
   padding:6px 0;
}
#content #sites small.right a {
   display:inline-block;
   padding:5px 10px;
   margin-left:4px;
   border:1px solid var(--border);
   border-radius:7px;
   color:var(--text);
   font-weight:600;
}
#content #sites small.right a:hover { background:var(--navy-800); border-color:var(--navy-800); color:#fff; text-decoration:none; }

/* --- single site view --- */

#content div.site {
   height:auto;
   overflow:hidden;
   padding:0;
   margin:0 0 6px;
   font:400 .95rem/1.75 var(--font);
   color:var(--text);
   text-align:left;
}
#content div.site img {
   border:1px solid var(--border);
   border-radius:var(--radius-sm);
   padding:0;
   margin:0 18px 10px 0;
   width:210px;
   height:158px;
   object-fit:cover;
   float:left;
}

#content ul.site {
   padding:0;
   margin:14px 0;
   clear:left;
   list-style:none;
   border:1px solid var(--border);
   border-radius:var(--radius-sm);
   overflow:hidden;
}
#content ul.site li {
   margin:0;
   list-style:none;
   font:400 .9rem/1.6 var(--font);
   color:var(--text);
   background:none;
   border-bottom:1px solid var(--border);
   padding:10px 14px;
}
#content ul.site li:last-child { border-bottom:0; }
#content ul.site li.in:nth-of-type(even) { background:var(--surface-2); }
#content ul.site li span { color:var(--muted); font-weight:600; }
#content ul.site li strong { color:var(--heading); }

#content ul.site li.report,
#content ul.site li.edit,
#content ul.site li.contact,
#content ul.site li.premium {
   background-repeat:no-repeat;
   background-position:14px 12px;
   padding-left:36px;
}
#content ul.site li.report  { background-image:url('../images/report.gif'); }
#content ul.site li.edit    { background-image:url('../images/edit.gif'); }
#content ul.site li.contact { background-image:url('../images/contact.gif'); }
#content ul.site li.premium { background-image:url('../images/premium.gif'); }
#content ul.site li.report a,
#content ul.site li.edit a,
#content ul.site li.contact a,
#content ul.site li.premium a { color:var(--link); font-weight:600; }

#content ul.site li .site_cat { width:auto; display:block; margin:6px 0 0 100px; }
#content ul.site li a { color:var(--link); font:inherit; margin:0; text-decoration:none; }
#content ul.site li a:hover { margin:0; color:var(--link-hover); text-decoration:underline; }

/* rating widget */
#content ul.unit-rating { padding:0; margin:0; border:0; }
#content ul.unit-rating li { padding:0; margin:0; border:0; background:none; }
#content ul.unit-rating li a, #content ul.unit-rating li a:hover { display:block; border:0; margin:0; padding:0; text-decoration:none; }

/* --- forms inside content --- */

#content form { margin:0 0 18px; }
#content table {
   margin:14px 0;
   width:100%;
   border-collapse:collapse;
   clear:both;
}
#content table tr td { padding:8px 6px; vertical-align:top; font:400 .9rem/1.55 var(--font); color:var(--text); }
#content table tr td h2 {
   background:none;
   padding:0 0 6px;
   margin:0;
   text-align:left;
   font:700 .95rem/1.3 var(--font);
   color:var(--heading);
}
#content table tr td small { color:var(--muted); font:400 .8rem/1.4 var(--font); }
#content table tr td img { padding:3px 3px 0 0; }

#content input[type="text"],
#content input[type="password"],
#content textarea,
#content select {
   font:inherit;
   font-size:.92rem;
   color:var(--text);
   background:var(--surface);
   border:1px solid var(--border-strong);
   border-radius:8px;
   padding:8px 11px;
   max-width:100%;
   vertical-align:middle;
}
#content textarea { line-height:1.6; }
#content textarea[readonly] { background:var(--surface-2); color:var(--muted); }
#content input[type="text"]:focus,
#content input[type="password"]:focus,
#content textarea:focus,
#content select:focus {
   outline:none;
   border-color:var(--link);
   box-shadow:0 0 0 3px rgba(14,116,144,.15);
}

/* google map */
#google-map-add, #google-map-site {
   float:left;
   width:100%;
   max-width:100%;
   height:300px;
   border:1px solid var(--border);
   border-radius:var(--radius-sm);
   background:var(--surface-2);
   margin-bottom:10px;
}
#google-map-site #google-map-error { clear:both; width:100%; height:auto; background:none; font-weight:700; color:var(--muted); }

/* tags */
#content #tags { margin:6px 0 14px; line-height:1.9; }
#content #tags a { color:var(--link); font-size:.85rem; }
#content #tags a:hover { text-decoration:underline; }

/* loading spinner */
.loading {
   min-height:34px;
   background:url('../images/working.gif') center no-repeat;
   width:100%;
   margin:6px auto;
}

/* map of poland box (widget from poland-map plugin) */
#wojewodztwa { margin:14px 0; }

/* ------------------------------ footer -------------------------------- */

#footer {
   width:auto;
   height:auto;
   margin:26px 0 0;
   padding:26px 28px;
   background:var(--navy-900);
   color:rgba(255,255,255,.7);
   border-radius:18px;
   text-align:left;
   font:400 .85rem/1.6 var(--font);
   clear:both;
}
.footer-inner {
   display:flex;
   justify-content:space-between;
   gap:20px 30px;
   flex-wrap:wrap;
   align-items:flex-start;
}
.footer-brand strong { display:block; color:#fff; font-size:1rem; font-weight:700; }
.footer-brand span { color:rgba(255,255,255,.55); font-size:.82rem; }
.footer-links { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; }
#footer a { color:rgba(255,255,255,.75); font:400 .85rem/1.5 var(--font); text-decoration:none; }
#footer a:hover { color:var(--accent); text-decoration:none; }
.footer-links .to-top { border:1px solid rgba(255,255,255,.22); border-radius:7px; padding:2px 10px; }
.footer-copy {
   margin-top:18px;
   padding-top:14px;
   border-top:1px solid rgba(255,255,255,.12);
   font-size:.78rem;
   color:rgba(255,255,255,.45);
}
.footer-copy strong { color:rgba(255,255,255,.65); font-weight:600; }

/* ---------------------------- responsive ------------------------------ */

@media (max-width:960px) {
   #content-wrap { grid-template-columns:1fr; }
   #content { grid-column:1; grid-row:1; }
   #sidebar { grid-column:1; grid-row:2; }
}

@media (max-width:720px) {
   #wrap { padding:0 14px 24px; }
   #header { padding:18px; border-radius:14px; gap:16px; }
   #header_left { gap:12px; }
   #header_left h1, #header_left h1 a { font-size:1.28rem; }
   #header_right, .search-group { width:100%; }
   #header_right input[type="text"] { flex:1 1 160px; min-width:0; }
   #menu { position:static; top:auto; }
   #content { padding:18px 16px; }
   #content div.site img { float:none; width:100%; height:auto; margin:0 0 12px; }
   #category table, #category table tbody, #category table tr, #category table td {
      display:block;
      width:auto !important;
      margin:0;
   }
   #category table { border-spacing:0; }
   #category table td { margin:0 0 10px; }
}

@media (max-width:520px) {
   #content h1 { font-size:1.06rem; }
   #content #sites ul li.premium::after { position:static; display:inline-block; margin:0 0 6px; }
   #content ul.site li span { width:auto !important; float:none !important; display:block; margin-bottom:2px; }
   #content ul.site li .site_cat { margin-left:0; }
   .footer-inner { flex-direction:column; gap:14px; }
}