/**
 * Стили для плейсхолдеров секций
 *
 * @package Watson_Builder
 */

/* Основной контейнер для плейсхолдеров */
.watson-builder-placeholders {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 20px;
    height: 360px;
    justify-content: flex-end;
}

/* Общие стили для всех плейсхолдеров */
.placeholder-section {
    background-color: #f0f0f0;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

/* Секция 1: Сложная шапка с навигацией */
.placeholder-header {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.placeholder-header-logo {
    width: 120px;
    height: 40px;
    background-color: #ddd;
    border-radius: 4px;
}

.placeholder-header-nav {
    display: flex;
    gap: 15px;
}

.placeholder-header-nav-item {
    width: 60px;
    height: 20px;
    background-color: #ddd;
    border-radius: 4px;
}

.placeholder-header-buttons {
    display: flex;
    gap: 10px;
}

.placeholder-header-button {
    width: 80px;
    height: 30px;
    background-color: #ddd;
    border-radius: 15px;
}

/* Секция 2: Сложная секция с изображениями и текстом */
.placeholder-hero {
    height: 300px;
    display: flex;
    padding: 20px;
    gap: 20px;
}

.placeholder-hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
}

.placeholder-hero-title {
    width: 80%;
    height: 30px;
    background-color: #ddd;
    border-radius: 4px;
}

.placeholder-hero-subtitle {
    width: 60%;
    height: 20px;
    background-color: #ddd;
    border-radius: 4px;
}

.placeholder-hero-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.placeholder-hero-text-line {
    height: 12px;
    background-color: #ddd;
    border-radius: 3px;
}

.placeholder-hero-text-line.long {
    width: 90%;
}

.placeholder-hero-text-line.medium {
    width: 75%;
}

.placeholder-hero-text-line.short {
    width: 60%;
}

.placeholder-hero-buttons {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.placeholder-hero-button {
    width: 120px;
    height: 40px;
    background-color: #ddd;
    border-radius: 20px;
}

.placeholder-hero-image {
    width: 45%;
    background-color: #e0e0e0;
    border-radius: 8px;
    position: relative;
}

.placeholder-hero-image-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: #ccc;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Секция 3: Сложная сетка с карточками */
.placeholder-features {
    padding: 20px;
}

.placeholder-features-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    gap: 15px;
}

.placeholder-features-title {
    width: 200px;
    height: 30px;
    background-color: #ddd;
    border-radius: 4px;
}

.placeholder-features-subtitle {
    width: 300px;
    height: 15px;
    background-color: #ddd;
    border-radius: 3px;
}

.placeholder-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.placeholder-feature-card {
    height: 180px;
    background-color: #e5e5e5;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.placeholder-feature-icon {
    width: 50px;
    height: 50px;
    background-color: #d0d0d0;
    border-radius: 8px;
}

.placeholder-feature-title {
    width: 80%;
    height: 15px;
    background-color: #d0d0d0;
    border-radius: 3px;
}

.placeholder-feature-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.placeholder-feature-text-line {
    height: 10px;
    background-color: #d0d0d0;
    border-radius: 2px;
}

.placeholder-feature-text-line.long {
    width: 90%;
}

.placeholder-feature-text-line.medium {
    width: 75%;
}

.placeholder-feature-text-line.short {
    width: 60%;
}

/* Секция 4: Сложный подвал с несколькими колонками */
.placeholder-footer {
    padding: 30px 20px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 30px;
}

.placeholder-footer-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.placeholder-footer-logo {
    width: 120px;
    height: 40px;
    background-color: #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
}

.placeholder-footer-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.placeholder-footer-text-line {
    height: 10px;
    background-color: #ddd;
    border-radius: 2px;
}

.placeholder-footer-text-line.long {
    width: 90%;
}

.placeholder-footer-text-line.medium {
    width: 75%;
}

.placeholder-footer-text-line.short {
    width: 60%;
}

.placeholder-footer-title {
    width: 80%;
    height: 15px;
    background-color: #ddd;
    border-radius: 3px;
    margin-bottom: 5px;
}

.placeholder-footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.placeholder-footer-link {
    width: 70%;
    height: 10px;
    background-color: #ddd;
    border-radius: 2px;
}

.placeholder-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.placeholder-footer-social-icon {
    width: 30px;
    height: 30px;
    background-color: #ddd;
    border-radius: 50%;
}

/* Стили для секции с отзывами */
.placeholder-testimonials {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 5px;
    width: 100%;
}

.placeholder-testimonials-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    width: 100%;
}

.placeholder-testimonials-title {
    width: 160px;
    height: 16px;
    background-color: #ddd;
    border-radius: 3px;
    margin-bottom: 10px;
}

.placeholder-testimonials-subtitle {
    width: 220px;
    height: 10px;
    background-color: #ddd;
    border-radius: 2px;
}

.placeholder-testimonials-slider {
    width: 100%;
}

.placeholder-testimonial-card {
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.placeholder-testimonial-rating {
    display: flex;
    gap: 5px;
}

.placeholder-testimonial-star {
    width: 14px;
    height: 14px;
    background-color: #ddd;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.placeholder-testimonial-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.placeholder-testimonial-text-line {
    height: 8px;
    background-color: #ddd;
    border-radius: 2px;
}

.placeholder-testimonial-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.placeholder-testimonial-avatar {
    width: 30px;
    height: 30px;
    background-color: #ddd;
    border-radius: 50%;
}

.placeholder-testimonial-name {
    width: 80px;
    height: 10px;
    background-color: #ddd;
    border-radius: 2px;
}

.placeholder-testimonials-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
}

.placeholder-testimonials-dot {
    width: 8px;
    height: 8px;
    background-color: #ddd;
    border-radius: 50%;
}

.placeholder-testimonials-dot.active {
    background-color: #bbb;
}

/* Стили для мобильных устройств */
@media (max-width: 768px) {
    .placeholder-header {
        flex-direction: column;
        height: auto;
        padding: 15px;
        gap: 15px;
        align-items: flex-start;
    }
    
    .placeholder-header-nav {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 5px;
    }
    
    .placeholder-hero {
        flex-direction: column;
        height: auto;
    }
    
    .placeholder-hero-image {
        width: 100%;
        height: 200px;
    }
    
    .placeholder-features-grid {
        grid-template-columns: 1fr;
    }
    
    .placeholder-footer {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}