/* ============================================
   Страница "Спасибо за заказ"
   Префикс ty- для изоляции
   ============================================ */
.ty-wrap {
    max-width: 700px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: #333;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 10px 0 40px;
}
.ty-header { text-align: center; }
.ty-check-circle {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #19a24d, #15883f);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 0 4px 16px rgba(25, 162, 77, 0.25);
}
.ty-title {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px;
}
.ty-subtitle { font-size: 15px; color: #888; margin: 0; }

/* Номер заказа */
.ty-order-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #f8fbfd;
    border: 1px solid #d6e8f0;
    border-radius: 10px;
    flex-wrap: wrap;
}
.ty-order-label { font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.ty-order-number { font-size: 22px; font-weight: 700; color: #046189; }
.ty-order-date { font-size: 13px; color: #999; margin-left: auto; }
.ty-copy-btn {
    background: none;
    border: 1px solid #d6e8f0;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    color: #999;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    position: relative;
}
.ty-copy-btn:hover { color: #046189; border-color: #046189; }
.ty-copied { color: #19a24d !important; border-color: #19a24d !important; }
.ty-copied::after {
    content: '\2713';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: #19a24d;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Шаги */
.ty-next-steps {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
}
.ty-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f2f4f7;
}
.ty-step:last-child { border-bottom: none; }
.ty-step-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ty-step-done { background: #19a24d; }
.ty-step-pending { background: #d0d5dd; }
.ty-step-text { display: flex; flex-direction: column; gap: 2px; }
.ty-step-text b { font-size: 14px; color: #333; }
.ty-step-text span { font-size: 12px; color: #888; }

/* Детали заказа */
.ty-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e8eaed;
}
.ty-products { display: flex; flex-direction: column; }
.ty-product-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f2f4f7;
}
.ty-product-row:last-child { border-bottom: none; }
.ty-product-img {
    width: 52px; height: 52px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f7f8fa;
}
.ty-product-img img { width: 52px; height: 52px; object-fit: cover; }
.ty-product-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ty-product-name { font-size: 14px; color: #333; font-weight: 500; }
.ty-product-meta { font-size: 12px; color: #999; }
.ty-product-price { font-size: 14px; font-weight: 600; color: #333; white-space: nowrap; }

/* Итого */
.ty-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-top: 2px solid #1a1a1a;
    font-size: 15px;
    color: #333;
}
.ty-total-sum { font-size: 22px; font-weight: 700; color: #1a1a1a; }

/* Инфо-карточки */
.ty-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ty-info-card {
    padding: 12px 16px;
    background: #f7f8fa;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ty-info-card:first-child { grid-column: 1 / -1; }
.ty-info-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #046189;
}
.ty-info-main { font-size: 14px; font-weight: 600; color: #333; margin: 0; }
.ty-info-sub { font-size: 13px; color: #888; margin: 0; }

/* Новый аккаунт */
.ty-new-account {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 18px;
    background: #f0f7fb;
    border: 1px solid #b3d9ea;
    border-radius: 8px;
}
.ty-new-account svg { flex-shrink: 0; margin-top: 2px; }
.ty-account-title { font-size: 15px; font-weight: 600; color: #046189; margin: 0 0 4px; }
.ty-account-text { font-size: 13px; color: #555; margin: 0; line-height: 1.5; }

/* Рекомендации */
.ty-rec-title { font-size: 13px; color: #888; margin: 0; font-weight: 600; }
.ty-rec-links { display: flex; gap: 8px; flex-wrap: wrap; }
.ty-rec-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f7f8fa;
    border: 1px solid #e8eaed;
    border-radius: 6px;
    font-size: 13px;
    color: #046189;
    text-decoration: none;
    font-weight: 500;
}
.ty-rec-link:hover { background: #eef5fa; border-color: #046189; }

/* Соцсети */
.ty-social { text-align: center; padding-top: 8px; border-top: 1px solid #e8eaed; }
.ty-social p { font-size: 13px; color: #999; margin: 0 0 8px; }
.ty-social-links { display: flex; gap: 10px; justify-content: center; }
.ty-social-links a { display: block; opacity: 0.5; }
.ty-social-links a:hover { opacity: 1; }
.ty-social-links img { height: 28px; }

/* Мобильная адаптация */
@media (max-width: 480px) {
    .ty-wrap { max-width: 100%; gap: 16px; margin-top: 30px;}
    .ty-title { font-size: 22px; }
    .ty-info-grid { grid-template-columns: 1fr; }
    .ty-info-card:first-child { grid-column: auto; }
    .ty-order-badge { flex-direction: column; align-items: flex-start; gap: 4px; }
    .ty-order-date { margin-left: 0; }
    .ty-total-sum { font-size: 20px; }
}