/* ========== smm.css ========== */

/* Общие */
.smm-section { padding: 50px 60px; border-bottom: 1px solid rgba(244,60,118,0.08); }
.smm-section .section-title { text-align: left; margin-bottom: 30px; font-size: 2rem; font-family: 'Orbitron', sans-serif; text-transform: uppercase; letter-spacing: 5px; color: #fff; text-shadow: 0 0 15px rgba(244,60,118,0.4); }

.smm-hero { background: radial-gradient(circle at 30% 50%, rgba(66,33,112,0.25) 0%, transparent 60%); }
.smm-hero-price { font-family: 'Orbitron', sans-serif; font-size: 1.8rem; font-weight: 800; color: #f43c76; margin-top: 25px; text-shadow: 0 0 20px rgba(244,60,118,0.5); }

.smm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.smm-card { background: rgba(12,7,28,0.5); border: 1px solid rgba(244,60,118,0.08); padding: 35px 30px; transition: all 0.35s; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); text-align: center; }
.smm-card:hover { border-color: rgba(244,60,118,0.25); background: rgba(12,7,28,0.7); transform: translateY(-4px); box-shadow: 0 8px 30px rgba(244,60,118,0.08); }
.smm-card-icon { font-size: 2.2rem; color: #f43c76; margin-bottom: 15px; }
.smm-card h3 { font-family: 'Orbitron', sans-serif; font-size: 1rem; color: #fff; margin-bottom: 10px; letter-spacing: 1px; }
.smm-card p { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; color: #9977aa; line-height: 1.6; }

.smm-platforms { background: radial-gradient(ellipse at 50% 0%, rgba(244,60,118,0.04) 0%, transparent 60%); }
.smm-platforms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
.smm-platform-card { text-align: center; padding: 40px 30px; background: rgba(12,7,28,0.4); border: 1px solid rgba(244,60,118,0.08); transition: all 0.35s; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.smm-platform-card:hover { border-color: rgba(244,60,118,0.25); background: rgba(12,7,28,0.6); transform: translateY(-4px); }
.smm-platform-icon { font-size: 3rem; color: #f43c76; margin-bottom: 15px; }
.smm-platform-card h3 { font-family: 'Orbitron', sans-serif; font-size: 1.3rem; color: #fff; margin-bottom: 8px; letter-spacing: 2px; }
.smm-platform-card p { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: #9977aa; line-height: 1.5; }

.smm-cta { text-align: center; margin-top: 35px; }
.smm-order-btn { width: 100%; font-size: 0.9rem; padding: 16px; }

.smm-cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.smm-case-card { position: relative; overflow: hidden; cursor: pointer; background: rgba(12,7,28,0.5); border: 1px solid rgba(244,60,118,0.08); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: all 0.35s; }
.smm-case-card:hover { border-color: rgba(244,60,118,0.25); background: rgba(12,7,28,0.7); transform: translateY(-4px); box-shadow: 0 8px 30px rgba(244,60,118,0.08); }
.smm-case-image { height: 220px; overflow: hidden; }
.smm-case-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.smm-case-card:hover .smm-case-image img { transform: scale(1.05); }
.smm-case-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(66,33,112,0.85); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
.smm-case-card:hover .smm-case-overlay { opacity: 1; }
.smm-case-view { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: #fff; text-transform: uppercase; letter-spacing: 2px; border: 2px solid #f43c76; padding: 10px 22px; }

.faq-list { margin-top: 30px; background: rgba(12,7,28,0.5); border: 1px solid rgba(244,60,118,0.2); padding: 10px 25px; }
.faq-item { border-bottom: 1px solid rgba(244,60,118,0.15); padding: 20px 0; cursor: pointer; }
.faq-item:last-child { border-bottom: none; }
.faq-question { font-family: 'JetBrains Mono', monospace; font-size: 0.95rem; color: #fff; display: flex; justify-content: space-between; align-items: center; }
.faq-question::after { content: '+'; color: #f43c76; font-size: 1.5rem; margin-left: 15px; flex-shrink: 0; }
.faq-item.active .faq-question::after { content: '-'; }
.faq-answer { color: #aabbcc; font-size: 0.85rem; line-height: 1.6; display: none; margin-top: 10px; }
.faq-item.active .faq-answer { display: block; }

.btn-order { display: inline-block; padding: 15px 35px; background: #f43c76; color: #fff; border: none; font-family: 'JetBrains Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; clip-path: polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); transition: 0.3s; }
.btn-order:hover { background: #ff3c66; box-shadow: 0 0 30px rgba(244,60,118,0.6); }
.template-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: rgba(0,0,0,0.88); backdrop-filter: blur(12px); justify-content: center; align-items: center; }
.template-modal.active { display: flex; }
.template-card { background: rgba(12,7,28,0.96); border: 1px solid rgba(244,60,118,0.5); max-width: 620px; width: 92%; padding: 40px; position: relative; box-shadow: 0 0 60px rgba(244,60,118,0.35); }
.template-card h3 { font-family: 'Orbitron', sans-serif; font-size: 1.8rem; color: #fff; margin-bottom: 12px; letter-spacing: 2px; }
.modal-close { position: absolute; top: 18px; right: 22px; font-size: 2.2rem; color: #ccc; cursor: pointer; transition: 0.3s; line-height: 1; }
.modal-close:hover { color: #f43c76; transform: rotate(90deg); }
.form-group { margin-bottom: 15px; }
.form-group input { width: 100%; padding: 14px; background: rgba(10,5,25,0.8); border: 1px solid rgba(244,60,118,0.3); color: #fff; font-family: 'JetBrains Mono', monospace; outline: none; }
.form-group input:focus { border-color: #f43c76; }

/* Детальная */
.smm-topbar { display: flex; justify-content: space-between; padding: 20px 60px; border-bottom: 1px solid rgba(244,60,118,0.08); }
.smm-back { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #9977aa; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; transition: color 0.3s; }
.smm-back:hover { color: #f43c76; }
.smm-article-title { font-family: 'Orbitron', sans-serif; font-size: 2.8rem; color: #fff; text-align: center; padding: 50px 60px 30px; text-shadow: 0 0 30px rgba(244,60,118,0.3); }

/* ГАЛЕРЕЯ — финальная версия */
.smm-gallery-scroll { 
    width: 100%; 
    display: flex; 
    overflow-x: auto; 
    gap: 0;
    cursor: grab;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    background: #060210;
    border-top: 2px solid rgba(244,60,118,0.2);
    border-bottom: 2px solid rgba(244,60,118,0.2);
    padding: 20px 0;
    margin: 0 0 40px;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
    user-select: none;
}
.smm-gallery-scroll:active { cursor: grabbing; }
.smm-gallery-scroll::-webkit-scrollbar { height: 10px; }
.smm-gallery-scroll::-webkit-scrollbar-track { background: #0a0515; border-radius: 5px; }
.smm-gallery-scroll::-webkit-scrollbar-thumb { background: #f43c76; border-radius: 5px; }
.smm-gallery-scroll img { 
    height: 400px; 
    width: auto; 
    object-fit: contain; 
    flex-shrink: 0; 
    padding: 0 10px;
    user-select: none;
    pointer-events: auto;
}

.smm-text { padding: 50px 60px; color: #aabbcc; font-size: 0.95rem; line-height: 2; max-width: 100%; }
.smm-text h2 { font-family: 'Orbitron', sans-serif; font-size: 1.4rem; color: #fff; margin: 35px 0 15px; }
.smm-text h3 { font-family: 'JetBrains Mono', monospace; font-size: 1rem; color: #bb99dd; margin: 25px 0 10px; }
.smm-text p { margin-bottom: 18px; }
.smm-text ul, .smm-text ol { padding-left: 25px; margin: 18px 0; }
.smm-text li { margin-bottom: 10px; }
.smm-text li::marker { color: #f43c76; }
.smm-cta-block { padding: 60px; text-align: center; background: radial-gradient(circle at center, rgba(244,60,118,0.05) 0%, transparent 70%); border-top: 1px solid rgba(244,60,118,0.08); border-bottom: 1px solid rgba(244,60,118,0.08); }
.smm-cta-inner h2 { font-family: 'Orbitron', sans-serif; font-size: 1.6rem; color: #fff; margin-bottom: 10px; }
.smm-cta-inner p { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: #9977aa; margin-bottom: 30px; }
.smm-detail-order { font-size: 0.9rem; padding: 16px 50px; }

@media (max-width: 768px) {
    .smm-section { padding: 35px 20px; }
    .smm-section .section-title { font-size: 1.4rem; letter-spacing: 3px; }
    .smm-hero-price { font-size: 1.3rem; }
    .smm-grid { grid-template-columns: 1fr; }
    .smm-platforms-grid { grid-template-columns: 1fr; }
    .smm-cases-grid { grid-template-columns: 1fr; }
    .smm-topbar { padding: 15px 20px; }
    .smm-article-title { font-size: 1.8rem; padding: 30px 20px 20px; }
    .smm-gallery-scroll img { height: 300px; padding: 0 5px; }
    .smm-text { padding: 30px 20px; font-size: 0.85rem; }
    .smm-cta-block { padding: 40px 20px; }
}
.smm-gallery-wrapper {
    position: relative;
    margin: 0 0 40px;
}

.smm-gallery-scroll { 
    width: 100%; 
    display: flex; 
    overflow-x: auto; 
    gap: 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    background: #060210;
    border-top: 2px solid rgba(244,60,118,0.2);
    border-bottom: 2px solid rgba(244,60,118,0.2);
    padding: 20px 0;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
    user-select: none;
}
.smm-gallery-scroll::-webkit-scrollbar { height: 10px; }
.smm-gallery-scroll::-webkit-scrollbar-track { background: #0a0515; border-radius: 5px; }
.smm-gallery-scroll::-webkit-scrollbar-thumb { background: #f43c76; border-radius: 5px; }
.smm-gallery-scroll img { 
    height: 400px; 
    width: auto; 
    object-fit: contain; 
    flex-shrink: 0; 
    padding: 0 10px;
    user-select: none;
    pointer-events: none;
}

/* Кнопки */
.gallery-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(244,60,118,0.8);
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 5;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-btn:hover { background: #f43c76; }
.gallery-btn-prev { left: 10px; }
.gallery-btn-next { right: 10px; }