.popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; backdrop-filter: blur(3px); } .popup-overlay.popup-visible { opacity: 1; visibility: visible; } .popup-modal { background: #fff; border-radius: 16px; max-width: 500px; width: 90%; max-height: 90vh; overflow: hidden; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); transform: scale(0.9) translateY(20px); transition: transform 0.3s ease; } .popup-visible .popup-modal { transform: scale(1) translateY(0); } .popup-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: none; background: rgba(0, 0, 0, 0.1); border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .popup-close:hover { background: rgba(0, 0, 0, 0.2); } .popup-image { width: 100%; border-radius: 16px 16px 0 0; overflow: hidden; } .popup-image img { width: 100%; height: auto; display: block; } .popup-content { padding: 24px; text-align: center; } .popup-title { font-size: 24px; font-weight: 700; color: #333; margin: 0 0 16px 0; line-height: 1.3; } .popup-text { font-size: 16px; color: #666; line-height: 1.6; margin-bottom: 20px; } .popup-text p { margin: 0 0 12px 0; } .popup-text p:last-child { margin-bottom: 0; } .popup-button { display: inline-block; padding: 14px 32px; background: linear-gradient(135deg, #ff6b6b, #ee5a5a); color: #fff; text-decoration: none; border-radius: 30px; font-size: 16px; font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 15px rgba(238, 90, 90, 0.4); } .popup-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(238, 90, 90, 0.5); color: #fff; text-decoration: none; } @media (max-width: 480px) { .popup-modal { width: 95%; border-radius: 12px; } .popup-content { padding: 20px; } .popup-title { font-size: 20px; } .popup-text { font-size: 14px; } .popup-button { padding: 12px 24px; font-size: 14px; } }