/* ================================================== GLOBAL RESET (prevents layout gaps) ================================================== */ html, body { margin: 0 !important; padding: 0 !important; } /* Hide floating "manage consent" mini button */ .cmplz-manage-link, .cmplz-manage-consent, .cmplz-show-manage-consent { display: none !important; } /* ================================================== COOKIE BANNER LAYOUT & BASE STYLES ================================================== */ .cmplz-cookiebanner { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; z-index: 9999 !important; box-shadow: 0 -2px 10px rgba(0,0,0,.1); border-radius: 0 !important; padding: 15px 30px !important; box-sizing: border-box !important; max-height: 100%!important; /* KEY CHANGE: Ensure text and button container stack vertically */ display: flex !important; flex-direction: column !important; align-items: flex-start !important; /* Align everything to the left */ gap: 15px !important; /* Space between message and button row */ } /* Hide header, dividers, categories in the banner */ .cmplz-header, .cmplz-divider, .cmplz-cookiebanner .cmplz-categories { display: block !important; } /* Message text - forced to be full width and larger */ .cmplz-message { flex: 1 1 100% !important; /* Forces message to take full width */ min-width: 100% !important; margin: 0 !important; line-height: 1.5 !important; order: 1 !important; /* Place message on top */ } /* Buttons container - DESKTOP ALIGNMENT */ .cmplz-buttons-wrapper, .cmplz-buttons { /* Ensure the button row takes full width, and aligns items to the right */ display: flex !important; width: 100% !important; align-items: center !important; /* MODIFIED: Aligns the button group (Link left, Button right) to the RIGHT side */ justify-content: flex-end !important; gap: 16px !important; flex-wrap: nowrap !important; margin: 0 !important; padding: 0 !important; order: 2 !important; /* Place button row below the message */ } /* Hide DENY button in banner .cmplz-cookiebanner .cmplz-deny { display: none !important; } */ button.cmplz-btn.cmplz-save-preferences { display: block; } /* Stop main buttons from stretching */ .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:not(.cmplz-view-preferences) { flex: 0 0 auto !important; } .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences { flex: 0 0 auto !important; width: auto !important; margin-right: auto !important; margin-top: -12px !important; /* reduce gap to text */ } .cmplz-cookiebanner .cmplz-btn { all: unset; display: inline-flex !important; justify-content: center; align-items: center; flex-grow: 1; flex-basis: 0; padding: 12px 16px; cursor: pointer; text-align: center; } .cmplz-modal-content .cmplz-buttons-wrapper.cmplz-buttons { display: flex !important; /* Ensure it uses flexbox for row layout */ gap: 10px !important; width: 100% !important; margin-top: 15px !important; } .cmplz-modal-content .cmplz-buttons-wrapper.cmplz-buttons > .cmplz-btn { flex-grow: 1 !important; flex-basis: 0 !important; min-width: unset !important; width: auto !important; } /* * 3. General Button Appearance (Re-confirming standard look) */ .cmplz-modal-content .cmplz-btn { padding: 12px 20px !important; font-size: 14px !important; /* border-radius: 6px !important; */ height: auto !important; box-sizing: border-box !important; } .cmplz-manage-consent-container .cmplz-message { min-width: 0 !important; flex-basis: auto !important; flex-shrink: 1 !important; flex-grow: 1 !important; /* This is essential for long, unbroken strings like the 'sadsad...' placeholder text */ overflow-wrap: break-word !important; word-wrap: break-word !important; /* Older browser support */ word-break: break-word !important; white-space: normal !important; /* Set a max-width based on the container if necessary, but min-width: 0 should be the key */ max-width: 100% !important; } .cmplz-manage-consent-container .cmplz-modal-content { max-width: 100% !important; overflow-x: hidden !important; } /* ================================================== BUTTONS STYLING - LAYOUT ONLY (NO BANNER COLORS) ================================================== */ .cmplz-btn { cursor: pointer !important; white-space: nowrap !important; text-align: center !important; height: auto !important; /* Base size properties */ padding: 12px 20px !important; font-size: 14px !important; /* border-radius: 6px !important; */ min-width: 100px !important; } .cmplz-btn:hover { opacity: 0.9 !important; } .cmplz-btn.cmplz-accept { width: 40% !important; min-width: 150px !important; flex-shrink: 0 !important; order: 2 !important; } .cmplz-btn.cmplz-view-preferences { font-weight: 400 !important; background: none !important; border: none !important; color: inherit !important; text-decoration: underline !important; cursor: pointer !important; /* DESKTOP STYLES: Pushed to the far left */ padding: 0 !important; /* Make it look like a text link */ min-width: auto !important; /* Key property: Pushes link to the absolute left within the right-aligned container */ margin-right: auto !important; margin-left: 0 !important; order: 1 !important; /* First element in the row (Left) */ /* Ensure text link styles */ text-decoration: underline !important; } /* Prevent layout jump */ .cmplz-cookiebanner { box-sizing: border-box !important; max-width: 100% !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } /* Reset .cmplz-body (if present in modal) */ .cmplz-modal-content .cmplz-body { display: block !important; } /* Modal styling retained from previous versions */ .cmplz-modal-overlay { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.5) !important; z-index: 99999 !important; display: none !important; align-items: center !important; justify-content: center !important; } .cmplz-modal-overlay:not(.cmplz-hidden), .cmplz-modal-overlay.cmplz-active { display: flex !important; } .cmplz-modal-content { background: white !important; padding: 24px !important; border-radius: 8px !important; max-width: 600px !important; width: 90% !important; max-height: 85vh !important; overflow-y: auto !important; position: relative !important; box-shadow: 0 10px 30px rgba(0,0,0,.2) !important; box-sizing: border-box !important; position: fixed !important; /* Use fixed positioning for the modal */ top: 50% !important; /* Move the top edge to 50% of the viewport height */ left: 50% !important; /* Move the left edge to 50% of the viewport width */ transform: translate(-50%, -50%) !important; /* Shift back by half of its own width and height */ /* Ensure it's above the overlay */ z-index: 100000 !important; } /* Remove extra spacing in modal */ .cmplz-modal-content > *:first-child { margin-top: 0 !important; } .cmplz-modal-content > *:last-child { margin-bottom: 0 !important; } .cmplz-close-modal { position: absolute !important; top: 16px !important; right: 16px !important; font-size: 24px !important; cursor: pointer !important; } .cmplz-title { font-size: 18px !important; font-weight: 700 !important; margin-bottom: 10px !important; } .cmplz-category input[type="checkbox"] { width: 20px !important; height: 20px !important; margin-right: 10px !important; } .cmplz-categories-modal { margin: 20px 0 !important; } .cmplz-category { margin-bottom: 15px !important; padding: 15px !important; border: 1px solid #eee !important; border-radius: 6px !important; } .cmplz-category-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 10px !important; } .cmplz-category-title { font-weight: 600 !important; font-size: 16px !important; } .cmplz-description { font-size: 0.9em !important; color: #666 !important; } /* Modal Footer Buttons */ .cmplz-modal-content .cmplz-buttons-wrapper, .cmplz-modal-content .cmplz-buttons { display: flex !important; justify-content: flex-end !important; gap: 10px !important; margin-top: 20px !important; flex-wrap: wrap !important; } .cmplz-modal-content .cmplz-btn { padding: 12px 20px !important; font-size: 14px !important; min-width: 100px !important; text-align: center !important; height: auto !important; } .cmplz-modal-content{ border-radius: 6px !important; } /* .cmplz-btn.cmplz-accept { background-color: #00ff00 !important; color: #000 !important; border: none !important; } */ /* .cmplz-btn.cmplz-save-preferences { background-color: #007bff !important; color: #fff !important; border: none !important; } .cmplz-btn.cmplz-deny { background-color: #ccc !important; color: #333 !important; border: none !important; } */ .cmplz-title { text-align: left !important; width: 100% !important; margin: 0 auto !important; } @media (min-width: 768px) { /* Reset the explicit width to 'auto', allowing the content to wrap and the container's flex/max-width to take effect. */ .cmplz-message, .cmplz-categories { width: auto !important; } } @media (max-width: 768px) { .cmplz-cookiebanner { padding: 15px !important; } .cmplz-buttons-wrapper, .cmplz-buttons { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 8px !important; flex-direction: column !important; /* Stack buttons vertically */ align-items: stretch !important; /* Forces them to full width */ } .cmplz-btn { padding: 14px 16px !important; font-size: 0.875em !important; min-width: auto !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .cmplz-btn.cmplz-view-preferences { padding: 7px 0px !important; width: 100% !important; order: 1 !important; margin-right: 0 !important; } .cmplz-btn.cmplz-accept { width: 100% !important; order: 2 !important; min-width: auto !important; box-sizing: border-box !important; white-space: normal!important; } .cmplz-modal-content { width: 95% !important; padding: 20px !important; } .cmplz-modal-content .cmplz-buttons { flex-direction: column !important; } .cmplz-message { min-width: 0 !important; /* Allows flex item to shrink below content size */ flex: 1 1 100% !important; /* Grow and shrink to fill available space */ max-width: 100% !important; /* Respect container bounds */ overflow-wrap: break-word !important; /* Break long words */ word-wrap: break-word !important; /* Legacy support */ word-break: break-word !important; /* Extra safety for unbroken strings */ hyphens: auto !important; /* Optional: nicer hyphenation where supported */ white-space: normal !important; /* Allow natural line wrapping */ } /* Prevent any horizontal overflow in the banner itself */ .cmplz-cookiebanner { overflow-x: hidden !important; /* Clip anything that still tries to overflow */ } }