/* Wróżka Donata — CTA (fiolet + złoto jak ikony horoskopów). Ładowane na końcu . */ @keyframes ctaGoldSheen { 0% { transform: translateX(-140%) skewX(-14deg); } 100% { transform: translateX(280%) skewX(-14deg); } } body .btn-order, body .btn-primary, body .btn-submit, body .nav-cta, body .hz-btn-primary, body .horoscope-submit, body button.hz-btn-gold { --cta-violet-deep: #120a22; --cta-violet-mid: #3d2560; --cta-violet-core: #4b2a6d; --cta-violet-light: #6b45a0; --cta-gold: #d4af37; --cta-gold-bright: #f9e076; --cta-gold-flare: #fff8e8; -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--cta-gold); border-radius: 10px; padding: 0.95rem 2.1rem; font-family: var(--font-title, 'Cinzel', serif); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; text-decoration: none; color: var(--cta-gold-flare, #fff8e8); cursor: pointer; background-color: var(--cta-violet-core); background-image: radial-gradient(1px 1px at 14% 22%, rgba(255, 255, 255, 0.45) 50%, transparent 51%), radial-gradient(1px 1px at 72% 18%, rgba(255, 255, 255, 0.35) 50%, transparent 51%), radial-gradient(1px 1px at 38% 68%, rgba(255, 255, 255, 0.3) 50%, transparent 51%), radial-gradient(1px 1px at 85% 55%, rgba(255, 255, 255, 0.28) 50%, transparent 51%), radial-gradient(1px 1px at 22% 88%, rgba(255, 255, 255, 0.32) 50%, transparent 51%), radial-gradient(1px 1px at 58% 42%, rgba(255, 255, 255, 0.22) 50%, transparent 51%), radial-gradient(ellipse 85% 55% at 50% 0%, rgba(249, 224, 118, 0.14) 0%, transparent 58%), linear-gradient( 168deg, var(--cta-violet-light) 0%, var(--cta-violet-core) 38%, var(--cta-violet-mid) 72%, var(--cta-violet-deep) 100% ); background-size: 100% 100%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(249, 224, 118, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.45), 0 3px 0 #0a0614, 0 10px 28px rgba(75, 42, 109, 0.5); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } body .btn-order::before, body .btn-primary::before, body .btn-submit::before, body .nav-cta::before, body .hz-btn-primary::before, body .horoscope-submit::before, body button.hz-btn-gold::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(249, 224, 118, 0.28) 48%, transparent 100%); transform: translateX(-140%) skewX(-14deg); animation: ctaGoldSheen 3.2s ease-in-out infinite; pointer-events: none; z-index: 1; } body .btn-order::after, body .btn-primary::after, body .btn-submit::after, body .nav-cta::after, body .hz-btn-primary::after, body .horoscope-submit::after, body button.hz-btn-gold::after { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 2px; border-radius: 1px; background: linear-gradient( 90deg, transparent, rgba(212, 175, 55, 0.5) 15%, rgba(255, 248, 232, 1) 50%, rgba(212, 175, 55, 0.5) 85%, transparent ); pointer-events: none; z-index: 2; } body .btn-order span, body .btn-primary span, body .btn-submit span, body .nav-cta span, body .hz-btn-primary span, body .horoscope-submit span { position: relative; z-index: 3; } body .btn-primary, body .horoscope-submit, body #horoskop .horoscope-submit.btn-primary { font-size: 1rem; letter-spacing: 0.16em; padding: 1.05rem 2.4rem; } body .btn-order { padding: 1rem 2.5rem; } body .btn-submit { font-size: 0.86rem; letter-spacing: 0.12em; padding: 0.88rem 1.65rem; } body .nav-cta { font-size: 0.68rem; letter-spacing: 0.1em; padding: 0.48rem 1rem; border-radius: 8px; } body .horoscope-submit { display: block; width: 100%; max-width: 22rem; margin-left: auto; margin-right: auto; } body .btn-order:hover, body .btn-primary:hover, body .btn-submit:hover, body .nav-cta:hover, body .hz-btn-primary:hover, body .horoscope-submit:hover, body button.hz-btn-gold:hover { transform: translateY(-2px); filter: brightness(1.08); border-color: var(--cta-gold-bright, #f9e076); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 248, 232, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 4px 0 #0a0614, 0 14px 36px rgba(107, 69, 160, 0.55), 0 0 24px rgba(212, 175, 55, 0.22); } body .btn-order:active, body .btn-primary:active, body .btn-submit:active, body .nav-cta:active, body .hz-btn-primary:active, body .horoscope-submit:active, body button.hz-btn-gold:active { transform: translateY(1px); filter: brightness(0.97); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 0 #0a0614; } body .btn-order:focus-visible, body .btn-primary:focus-visible, body .btn-submit:focus-visible, body .nav-cta:focus-visible, body .hz-btn-primary:focus-visible, body .horoscope-submit:focus-visible, body button.hz-btn-gold:focus-visible { outline: 2px solid var(--cta-gold-bright, #f9e076); outline-offset: 3px; } body button.hz-btn-gold { flex-direction: column; gap: 0.3rem; width: 100%; padding: 1.1rem 1.5rem 1rem; text-transform: none; letter-spacing: normal; color: #1a1008; border-color: #f9e076; background-color: #c9a03a; background-image: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 255, 255, 0.35) 0%, transparent 55%), linear-gradient(175deg, #fff8e8 0%, #f9e076 18%, #e8c96a 45%, #d4af37 72%, #a67c00 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(120, 80, 10, 0.35), 0 3px 0 #5a4010, 0 10px 28px rgba(200, 168, 75, 0.45); } body button.hz-btn-gold:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(120, 80, 10, 0.25), 0 4px 0 #5a4010, 0 14px 32px rgba(212, 175, 55, 0.5); } body .hz-btn-cta-main { font-family: var(--font-title, 'Cinzel', serif); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #1a1006; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); position: relative; z-index: 3; } body .hz-btn-cta-sub { font-family: var(--font-body, 'Lato', sans-serif); font-size: 0.8rem; font-weight: 500; letter-spacing: normal; text-transform: none; color: rgba(28, 16, 6, 0.78); position: relative; z-index: 3; } body .hz-btn-cta-price { font-family: var(--font-display, 'Cinzel Decorative', serif); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1; color: #120a04; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); position: relative; z-index: 3; } body .btn-secondary, body .btn-share, body .btn-share-icon, body .hz-btn-ghost, body a.hz-btn-ghost { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font-family: var(--font-title, 'Cinzel', serif); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--gold-light, #f0d080); cursor: pointer; border-radius: 10px; padding: 0.78rem 1.4rem; background: linear-gradient(160deg, #0d2137 0%, #060d14 100%); border: 1px solid rgba(200, 168, 75, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.35); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } body .btn-share, body .btn-share-icon { min-width: min(100%, 320px); padding: 0.88rem 2rem; } body .btn-share-icon { width: 46px; height: 46px; min-width: 46px; padding: 0; border-radius: 10px; } body .btn-secondary:hover, body .btn-share:hover, body .btn-share-icon:hover, body .hz-btn-ghost:hover, body a.hz-btn-ghost:hover { color: #fff8e8; border-color: rgba(249, 224, 118, 0.75); background: linear-gradient(160deg, #152a45 0%, #0a1420 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(75, 42, 109, 0.25), 0 0 18px rgba(212, 175, 55, 0.12); transform: translateY(-1px); } body .btn-secondary:active, body .btn-share:active, body .btn-share-icon:active, body .hz-btn-ghost:active { transform: translateY(0); } body .btn-secondary:focus-visible, body .btn-share:focus-visible, body .btn-share-icon:focus-visible, body .hz-btn-ghost:focus-visible { outline: 2px solid rgba(249, 224, 118, 0.75); outline-offset: 3px; } body .btn-share span, body .btn-share-icon svg { position: relative; z-index: 1; } body .btn-share-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } body .hz-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; } body .hz-btn-ghost, body a.hz-btn-ghost { margin-top: 0.75rem; color: var(--cyan, #38bcd4); border-color: rgba(56, 188, 212, 0.4); } body .hz-btn-ghost:hover, body a.hz-btn-ghost:hover { color: #e8faff; border-color: rgba(56, 188, 212, 0.65); background: rgba(13, 33, 55, 0.9); } @media (prefers-reduced-motion: reduce) { body .btn-order::before, body .btn-primary::before, body .btn-submit::before, body .nav-cta::before, body .hz-btn-primary::before, body .horoscope-submit::before, body button.hz-btn-gold::before { animation: none; opacity: 0.12; transform: none; } body .btn-primary, body .btn-secondary, body .btn-share, body .btn-share-icon, body .horoscope-submit { animation: none; } }