/* When the terberg popup is open add a class on and use it to set backdrop opacity */ .terberg-modal { /* change the last value (0.6) to your preferred opacity (0 = transparent, 1 = solid) */ background-color: rgb(56, 56, 56, 0.8) !important; } /* Optional: adjust modal content opacity / background */ .terberg-modal .modal-content { /* tweak rgba alpha for modal interior (0 = transparent, 1 = opaque) */ background-color: rgba(255, 255, 255, 0.98); } .terberg-modal .modal-content { border: none; box-shadow: none; position: relative; padding: 0; overflow: visible; background: transparent; } .terberg-popup-img-container { position: relative; /* Remove width/max-width so it fits the image */ width: auto; max-width: none; margin: auto; display: inline-block; } .terberg-popup-img { display: block; border-radius: 10px; /* Remove width: 100% so image uses its natural size */ width: auto; max-width: 40vw; height: auto; } .terberg-close-btn { position: absolute; top: -28px; /* Move above the popup */ right: -28px; /* Move to the right outside */ z-index: 1056; /* Above modal */ background: rgba(255, 255, 255, 0.95); border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1.7rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); transition: background 0.2s; } .terberg-close-btn:hover { background: #fff; } .terberg-form-container { position: absolute; left: 105px; bottom: 50px; border-radius: 8px; width: 570px; } .terberg-form-container h5 { font-weight: bold; text-transform: uppercase; text-align: center; font-size: 1.25rem; } .terberg-form-container p { font-size: 0.85rem; color: #555; text-align: center; margin-bottom: 1rem; } .terberg-form-container input.form-control { border-radius: 6px; padding: 5px 12px; font-size: 0.95rem; background-color: #e8e8e8; border: 1px solid #b5b5b5; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); color: #939393; text-align: center; /* Center placeholder and input text */ } /* Add c-mb-2 utility for margin-bottom */ .c-mb-2 { margin-bottom: 0.4rem !important; } .terberg-form-container .c-btn-primary { background-color: #0431c6; border-color: #0431c6; color: #fff; text-transform: uppercase; font-weight: bold; font-size: 0.95rem; } .terberg-form-container .c-btn-primary:hover { background-color: #0431c6; border-color: #0431c6; } .terberg-form-container .terberg-thankyou-message { display: none; text-align: center; font-weight: bold; font-size: 1.1rem; color: rgb(51, 51, 51); padding-bottom: 15px; } .terberg-form-container .c-btn-primary:hover { background-color: #0431c6; border-color: #f15a38; } @media (max-width: 600px) { .terberg-popup-img-container { width: 100%; } .terberg-form-container { left: 50px; right: 8px; bottom: 15px; min-width: 80px; max-width: 100px; } .terberg-form-container input.form-control { font-size: 0.3rem; padding: 4px 12px; } .terberg-form-container .c-btn-primary { font-size: 0.3rem; padding: 4px 12px; } /* Responsive margin for c-mb-2 */ .c-mb-2 { margin-bottom: 0.19rem !important; } }