.scccc-banner {
position: fixed;
inset-inline: 16px;
bottom: 16px;
max-width: 520px;
background: #fff;
border: 1px solid #e5e7eb;
box-shadow: 0 10px 30px rgba(0,0,0,.12);
border-radius: 12px;
z-index: 999999;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.scccc-banner[hidden] {
display: none;
}
.scccc-inner { 
padding: 40px 20px 20px;
direction: rtl;
position: relative;
}
.scccc-close-btn {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
background: transparent;
border: none;
cursor: pointer;
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: all 0.2s ease;
padding: 0;
margin-bottom: 15px;
}
.scccc-close-btn:hover {
background: #f3f4f6;
color: #111827;
}
.scccc-close-btn:active {
background: #e5e7eb;
}
.scccc-close-btn svg {
width: 20px;
height: 20px;
}
.scccc-logo-wrapper {
margin-top: 16px;
text-align: center;
}
.scccc-logo {
width: 80px;
height: auto;
opacity: 0.6;
transition: opacity 0.3s ease;
}
.scccc-logo:hover {
opacity: 0.9;
}
.scccc-text { 
margin: 0 0 16px; 
font-size: 15px; 
line-height: 1.6; 
color: #374151;
}
.scccc-switches { 
display: flex; 
flex-direction: column;
gap: 0; 
margin: 16px 0 18px;
}
.scccc-switch-item {
user-select: none;
padding: 15px 0 25px;
border-bottom: 1px solid #eee;
}
.scccc-switch-item:last-child {
border-bottom: none;
}
.scccc-switch-content {
display: flex;
flex-direction: column;
gap: 0;
}
.scccc-switch-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.scccc-switch-label {
font-weight: 600;
font-size: 15px;
color: #111827;
flex: 1;
}
.scccc-switch-desc {
display: block;
font-size: 12px;
color: #6b7280;
line-height: 1.5;
font-weight: normal;
padding-inline-end: 60px;
margin-top: 4px;
} .scccc-toggle {
position: relative;
display: inline-block;
width: 48px;
height: 26px;
flex-shrink: 0;
}
.scccc-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.scccc-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #d1d5db;
transition: 0.3s;
border-radius: 26px;
}
.scccc-toggle-slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.scccc-toggle input:checked + .scccc-toggle-slider {
background-color: #10b981;
}
.scccc-toggle input:focus + .scccc-toggle-slider {
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.scccc-toggle input:checked + .scccc-toggle-slider:before {
transform: translateX(22px);
}
.scccc-toggle:hover .scccc-toggle-slider {
background-color: #9ca3af;
}
.scccc-toggle input:checked:hover + .scccc-toggle-slider {
background-color: #059669;
}
.scccc-actions { 
display: flex; 
gap: 10px; 
margin-top: 12px;
flex-wrap: wrap;
}
.scccc-btn {
appearance: none; 
border: 0; 
cursor: pointer; 
padding: 11px 18px;
border-radius: 8px; 
font-weight: 600; 
font-size: 14px;
transition: all 0.2s ease;
flex: 1;
min-width: 120px;
}
.scccc-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.scccc-btn:active {
transform: translateY(0);
} .scccc-save:hover { 
background: #1f2937; 
}  .scccc-footer-links {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 12px;
flex-wrap: wrap;
text-align: center;
}
.scccc-privacy-link,
.scccc-gdpr-link {
color: #2563eb; 
font-size: 13px;
text-decoration: underline; 
transition: color 0.2s ease;
}
.scccc-privacy-link:hover,
.scccc-gdpr-link:hover {
color: #1d4ed8;
}
.scccc-link-separator {
color: #9ca3af;
font-size: 13px;
user-select: none;
pointer-events: none;
padding: 0 4px;
} .scccc-manage-float {
display: none !important;
} @media (max-width: 600px) {
.scccc-banner {
inset-inline: 12px;
bottom: 12px;
max-width: none;
}
.scccc-inner {
padding: 16px;
}
.scccc-logo {
width: 60px; }
.scccc-actions {
flex-direction: column;
}
.scccc-btn {
width: 100%;
min-width: auto;
}
.scccc-switches {
gap: 0;
}
.scccc-switch-item {
min-width: 100%;
}
.scccc-manage-float {
bottom: 16px;
left: 16px;
width: 44px;
height: 44px;
}
} [dir="rtl"] .scccc-close-btn {
right: auto;
left: 12px;
}
[dir="rtl"] .scccc-manage-float {
left: auto;
right: 20px;
}
@media (max-width: 600px) {
[dir="rtl"] .scccc-close-btn {
right: auto;
left: 10px;
}
[dir="rtl"] .scccc-manage-float {
left: auto;
right: 16px;
}
}