#ccm-banner { position: fixed; bottom: 0; left: 0; width: 100%; display: flex; justify-content: center; padding: 1rem; box-sizing: border-box; z-index: 10000; } #ccm-banner .ccm-inner { background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.1); max-width: 800px; width: 100%; padding: 2rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; } #ccm-banner h2 { margin: 0; font-size: 1.5rem; color: #111; } #ccm-banner p { margin: .5rem 0 1.5rem; color:#333; grid-column: 1 / span 2; } #ccm-banner a { color:#06c; text-decoration: underline; } #ccm-banner fieldset { border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1rem; } #ccm-banner label { color:#555; } #ccm-banner input[type=checkbox]{ margin-right:.5rem; } #ccm-banner .ccm-actions { display:flex; gap:.5rem; grid-column:1 / span 2; justify-content:flex-end; } #ccm-banner .button { padding:.75rem 1.5rem; border:2px solid #06c; background:transparent; color:#06c; border-radius:6px; cursor:pointer; transition:.2s; } #ccm-banner .button:hover { background:#06c; color:#fff; } #ccm-banner .button-primary { background:#06c; color:#fff; border-color:#06c; } #ccm-banner .button-primary:hover { background:#049; border-color:#049; } @media (max-width: 600px) { #ccm-banner .ccm-inner { grid-template-columns: 1fr; padding: 1.5rem; } #ccm-banner .ccm-actions { justify-content: stretch; } } /* По умолчанию баннер скрыт */ #ccm-banner { display: none; } /* Показать баннер, только если в есть data-ccm-show="1" */ html[data-ccm-show="1"] #ccm-banner { display: flex; }