/* ============================================================
   SHEZMU, děkovná stránka po objednávce
   Soubor: /user/documents/upload/CSS/shezmu-thankyou.css
   Pracuje spolu se shezmu-thankyou.js
   ============================================================ */

.ty { max-width: 780px; margin: 28px 0 32px; font-family: 'Poppins', sans-serif; color: #1a1a1a; }
.ty p { margin: 0; }
.ty-orn { position: relative; width: 116px; height: 9px; margin: 0 0 16px; font-size: 0; line-height: 0; }
.ty-orn::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: linear-gradient(90deg, #b8924a 0 44px, transparent 44px 72px, #d4609a 72px 116px); opacity: 0.8; }
.ty-orn::after { content: ''; position: absolute; left: 58px; top: 1px; width: 7px; height: 7px; background: #1a1a1a; transform: translateX(-50%) rotate(45deg); }
.ty-caption { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: #9a9a9a; margin: 0 0 10px; }
.ty-hero { margin: 0 0 30px; }
.ty p.ty-title { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 300; line-height: 1.3; color: #1a1a1a; margin: 0 0 10px; }
.ty p.ty-lead { font-size: 15px; font-weight: 300; line-height: 1.8; color: #4a4a4a; }

/* Časová osa */
.ty-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 30px; }
.ty-step { border-top: 2px solid #e6e6e6; padding: 14px 0 0; }
.ty-step.is-done { border-top-color: #1a1a1a; }
.ty-step-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #1a1a1a; font-size: 12px; font-weight: 500; line-height: 1; margin: 0 0 10px; }
.ty-step.is-done .ty-step-dot { background: #1a1a1a; }
.ty-step-dot img { width: 14px; height: 14px; }
.ty-step-title { display: block; font-size: 14px; font-weight: 500; margin: 0 0 4px; }
.ty-step-text { display: block; font-size: 13px; font-weight: 300; line-height: 1.6; color: #4a4a4a; }

/* Dárek */
.ty-gift { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; background: #f7f7f7; margin: 0 0 30px; }
.ty-gift img { flex-shrink: 0; width: 34px; height: 34px; }
.ty-gift p.ty-gift-title { font-size: 16px; font-weight: 500; margin: 0 0 6px; }
.ty-gift p.ty-gift-text { font-size: 14px; font-weight: 300; line-height: 1.7; color: #4a4a4a; }
.ty-gift strong { font-weight: 500; color: #1a1a1a; }

/* Sociální sítě */
.ty-social { border: 1px solid #e6e6e6; border-top: 2px solid #1a1a1a; padding: 26px 24px; margin: 0 0 30px; }
.ty-social p.ty-social-title { font-size: 18px; font-weight: 300; line-height: 1.4; margin: 0 0 8px; }
.ty-social p.ty-social-text { font-size: 14px; font-weight: 300; line-height: 1.7; color: #4a4a4a; margin: 0 0 18px; }
.ty-social-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 20px; }
.ty-social-item { font-size: 13px; font-weight: 300; line-height: 1.5; color: #4a4a4a; padding: 10px 0 0; border-top: 1px solid #e6e6e6; }
.ty-social-item strong { display: block; font-weight: 500; color: #1a1a1a; }
.ty-btns { display: flex; flex-wrap: wrap; gap: 10px; }
a.ty-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border: 1px solid #1a1a1a; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none !important; transition: background 0.2s ease, color 0.2s ease; }
a.ty-btn img { width: 18px; height: 18px; }
a.ty-btn.is-ig { background: #1a1a1a; color: #fff !important; }
a.ty-btn.is-ig:hover { background: #4a4a4a; border-color: #4a4a4a; }
a.ty-btn.is-fb { background: #fff; color: #1a1a1a !important; }
a.ty-btn.is-fb:hover { background: #f7f7f7; }

/* Tipy a pomoc */
.ty-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ty-box p.ty-box-title { font-size: 15px; font-weight: 500; margin: 0 0 10px; }
.ty-box ul { list-style: none; margin: 0; padding: 0; }
.ty-box li { position: relative; padding: 0 0 0 18px; margin: 0 0 8px; font-size: 14px; font-weight: 300; line-height: 1.6; color: #4a4a4a; }
.ty-box li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; background: #b8924a; transform: rotate(45deg); }
.ty-box p.ty-box-text { font-size: 14px; font-weight: 300; line-height: 1.7; color: #4a4a4a; }
.ty a.ty-link { color: #1a1a1a !important; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #b8924a; }

@media (max-width: 767px) {
  .ty-steps { grid-template-columns: 1fr 1fr; }
  .ty-social-list, .ty-cols { grid-template-columns: 1fr; }
  a.ty-btn { width: 100%; justify-content: center; }
  .ty-gift { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .ty * { transition: none !important; } }
.ty-step-dot svg, a.ty-btn svg, .ty-gift svg { display: block; }


/* ── Zarovnání na střed ── */
.ty { margin-left: auto; margin-right: auto; }
.ty-hero, .ty-social { text-align: center; }
.ty-hero .ty-orn { margin-left: auto; margin-right: auto; }
.ty-hero p.ty-lead { max-width: 600px; margin: 0 auto; }
.ty > .ty-caption { text-align: center; }
.ty-step { text-align: center; }
.ty-social p.ty-social-text { max-width: 560px; margin-left: auto; margin-right: auto; }
.ty-social-item { text-align: center; }
.ty-btns { justify-content: center; }