.lazy-slider-container { position: relative; width: 100%; margin: 50px 0; overflow: visible; background: #f8f9fa; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); padding-top: 10px; } .lazy-slider-small-image { position: absolute; top: -20px; left: 15px; z-index: 20; width: 60px; height: 40px; overflow: hidden; border-radius: 5px; border: 1px solid #e9ecef; background: #fff; } .small-preview-image { width: 100%; height: 100%; object-fit: cover; } .lazy-slides-wrapper { position: relative; width: 100%; min-height: 150px; overflow: hidden; border-radius: 12px; } .lazy-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s; box-sizing: border-box; } .lazy-slide.active { opacity: 1; visibility: visible; } .lazy-slide-content { padding: 25px 30px; text-align: left; } .lazy-slide-title { margin-top: 0; margin-bottom: 15px; font-size: 24px; font-weight: 600; color: #212529; } .lazy-slide-description { margin-bottom: 10px; font-size: 16px; line-height: 1.6; color: #495057; } .lazy-slider-pagination { position: absolute; bottom: 15px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 8px; z-index: 10; padding: 0 30px; } .lazy-slider-pagination .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, 0.2); cursor: pointer; transition: all 0.3s ease; } .lazy-slider-pagination .dot:hover { background: rgba(0, 0, 0, 0.4); } .lazy-slider-pagination .dot.active { width: 12px; height: 12px; background: var(--wp--preset--color--contrast-2); } .lazy-slider-arrows { position: absolute; bottom: 15px; right: 20px; display: flex; gap: 10px; z-index: 15; } .lazy-slider-arrow { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: none; color: var(--wp--preset--color--contrast-2); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; padding: 0; } .lazy-slider-arrow:hover { background: #f1f3f5; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); color: var(--wp--preset--color--contrast-2); } .lazy-slider-arrow svg { width: 18px; height: 18px; } @media (max-width: 768px) { .lazy-slide-content { padding: 20px; } .lazy-slide-title { font-size: 20px; } .lazy-slide-description { font-size: 14px; } .lazy-slider-arrows { bottom: 10px; right: 10px; } .lazy-slider-arrow { width: 32px; height: 32px; } }