/* ==========================================================================
   PORTAL GMINNY — Cookie Consent Styles
   ========================================================================== */

/* ── Pasek dolny ── */
#cc-bar {
	position:   fixed;
	bottom:     0; left: 0; right: 0;
	z-index:    9998;
	background: #1e293b;
	color:      #f1f5f9;
	box-shadow: 0 -4px 24px rgba(0,0,0,.3);
	transform:  translateY(100%);
	transition: transform .35s cubic-bezier(.4,0,.2,1);
}
#cc-bar.cc-bar--visible { transform: translateY(0); }

.cc-inner {
	max-width: 1200px;
	margin:    0 auto;
	padding:   1rem 1.5rem;
	display:   flex;
	align-items: center;
	gap:       1.5rem;
	flex-wrap: wrap;
}
.cc-text            { flex: 1 1 280px; }
.cc-text strong     { display: block; font-size: .95rem; margin-bottom: .25rem; color: #fff; }
.cc-text p          { font-size: .82rem; line-height: 1.5; color: #94a3b8; margin: 0; }
.cc-link            { color: #22c55e; text-decoration: underline; }
.cc-link:hover      { color: #4ade80; }

.cc-actions { display: flex; gap: .6rem; flex-wrap: wrap; flex-shrink: 0; align-items: center; }

/* ── Przyciski ── */
.cc-btn {
	padding:       .5rem 1.1rem;
	border-radius: 999px;
	font-size:     .82rem;
	font-weight:   600;
	cursor:        pointer;
	border:        2px solid transparent;
	transition:    background .18s, color .18s, border-color .18s;
	white-space:   nowrap;
	line-height:   1.4;
}
.cc-btn--primary            { background: #22c55e; color: #fff; border-color: #22c55e; }
.cc-btn--primary:hover      { background: #16a34a; border-color: #16a34a; }
.cc-btn--secondary          { background: transparent; color: #94a3b8; border-color: #475569; }
.cc-btn--secondary:hover    { background: #334155; color: #f1f5f9; border-color: #64748b; }
.cc-btn--ghost              { background: transparent; color: #64748b; border-color: transparent;
                               text-decoration: underline; font-size: .78rem; }
.cc-btn--ghost:hover        { color: #94a3b8; }

/* ── Overlay ── */
.cc-overlay {
	position:       fixed;
	inset:          0;
	z-index:        9999;
	background:     rgba(0,0,0,.55);
	display:        flex;
	align-items:    center;
	justify-content: center;
	padding:        1rem;
	opacity:        0;
	transition:     opacity .3s;
}
.cc-overlay.cc-overlay--visible { opacity: 1; }
.cc-noscroll { overflow: hidden; }

/* ── Modal ── */
.cc-modal {
	background:    #fff;
	border-radius: 16px;
	width:         100%;
	max-width:     680px;
	max-height:    90vh;
	overflow-y:    auto;
	padding:       2rem;
	position:      relative;
	box-shadow:    0 24px 64px rgba(0,0,0,.2);
	color:         #1e293b;
}
.cc-modal__close {
	position:      absolute;
	top: 1rem; right: 1rem;
	background:    #f1f5f9; border: none; border-radius: 999px;
	width:         32px; height: 32px;
	display:       flex; align-items: center; justify-content: center;
	cursor:        pointer; color: #64748b;
	transition:    background .15s, color .15s;
}
.cc-modal__close:hover          { background: #e2e8f0; color: #1e293b; }
.cc-modal__title                { font-size: 1.2rem; font-weight: 700; margin: 0 0 .5rem; }
.cc-modal__intro                { font-size: .85rem; color: #64748b; margin: 0 0 1.5rem; line-height: 1.6; }

/* ── Kategoria ── */
.cc-cat {
	border:        1px solid #e2e8f0;
	border-radius: 12px;
	padding:       1rem 1.25rem;
	margin-bottom: 1rem;
}
.cc-cat__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             1rem;
	margin-bottom:   .5rem;
}
.cc-cat__name         { font-weight: 700; font-size: .95rem; }
.cc-cat__desc-short   { font-size: .78rem; color: #64748b; display: block; margin-top: .1rem; }
.cc-cat__desc         { font-size: .8rem; color: #64748b; margin: 0 0 .75rem; line-height: 1.5; }
.cc-badge {
	background:    #dcfce7; color: #15803d;
	font-size:     .7rem; font-weight: 700;
	padding:       .15rem .55rem; border-radius: 999px;
	margin-left:   .5rem; vertical-align: middle;
}

/* ── Tabela ── */
.cc-table                     { width: 100%; border-collapse: collapse; font-size: .75rem; margin-top: .5rem; }
.cc-table th                  { text-align: left; padding: .35rem .5rem; background: #f8fafc; color: #475569;
                                 font-weight: 600; border-bottom: 1px solid #e2e8f0; }
.cc-table td                  { padding: .35rem .5rem; border-bottom: 1px solid #f1f5f9; color: #374151; vertical-align: top; }
.cc-table tr:last-child td    { border-bottom: none; }

/* ── Toggle ── */
.cc-toggle                    { display: flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.cc-toggle input              { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-toggle__track             { width: 44px; height: 24px; background: #cbd5e1; border-radius: 999px;
                                 position: relative; transition: background .2s; }
.cc-toggle input:checked + .cc-toggle__track { background: #22c55e; }
.cc-toggle__thumb             { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
                                 background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2);
                                 transition: transform .2s; }
.cc-toggle input:checked + .cc-toggle__track .cc-toggle__thumb { transform: translateX(20px); }

/* ── Stopka modala ── */
.cc-modal__footer {
	display:        flex; gap: .75rem; flex-wrap: wrap;
	margin-top:     1.5rem; padding-top: 1.25rem;
	border-top:     1px solid #e2e8f0;
}
.cc-modal__footer .cc-btn--secondary       { color: #374151; border-color: #d1d5db; }
.cc-modal__footer .cc-btn--secondary:hover { background: #f1f5f9; }

/* ── Responsive ── */
@media (max-width: 640px) {
	.cc-inner          { flex-direction: column; align-items: flex-start; gap: 1rem; }
	.cc-actions        { width: 100%; flex-direction: column; }
	.cc-btn            { width: 100%; text-align: center; }
	.cc-modal          { padding: 1.25rem; border-radius: 12px; }
	.cc-table th,
	.cc-table td       { padding: .25rem .35rem; }
	.cc-modal__footer  { flex-direction: column; }
	.cc-modal__footer .cc-btn { width: 100%; text-align: center; }
}