/* Payment & refund page — page-specific styles */

.doc-wrap { max-width: 860px; }
.doc-section { scroll-margin-top: 170px; }

.pay-anchor-nav { background: rgba(8,15,30,0.95); border-bottom: 1px solid rgba(255,255,255,0.07); padding: 0 24px; position: sticky; top: 80px; z-index: 100; }
.pay-anchor-nav ul { list-style: none; margin: 0 auto; padding: 0; display: flex; overflow-x: auto; max-width: 860px; }
.pay-anchor-nav ul::-webkit-scrollbar { display: none; }
.pay-anchor-nav li a { display: block; padding: 14px 18px; font-size: 0.82rem; color: rgba(255,255,255,0.55); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.pay-anchor-nav li a:hover { color: var(--accent-light); border-bottom-color: var(--accent-light); }

.pay-methods { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 14px; margin: 20px 0; }
.pay-method-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 18px 16px; display: flex; gap: 12px; align-items: flex-start; }
.pay-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; background: rgba(88,120,152,0.14); display: flex; align-items: center; justify-content: center; }
.pay-icon svg { width: 18px; height: 18px; stroke: var(--accent-light); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pay-method-title { font-size: 0.92rem; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
.pay-method-desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }

.pay-logos-bar { display: flex; align-items: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 18px 24px; margin: 20px 0; overflow-x: auto; }
.pay-logos-bar img { height: 28px; max-width: 100%; opacity: 0.85; }

.pay-steps { counter-reset: step; list-style: none; padding: 0; margin: 16px 0; }
.pay-steps li { counter-increment: step; display: flex; gap: 16px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; }
.pay-steps li:last-child { border-bottom: none; }
.pay-steps li::before { content: counter(step); min-width: 30px; height: 30px; border-radius: 50%; background: rgba(88,120,152,0.15); color: var(--accent-light); font-size: 0.82rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }

/* Receipt mockup — intentionally light colors (paper effect) */
.pay-receipt { background: #fff; color: #111; border-radius: 10px; padding: 22px 26px; max-width: 320px; margin: 20px 0; font-family: 'Courier New', monospace; font-size: 0.82rem; line-height: 1.65; box-shadow: 0 4px 32px rgba(0,0,0,0.35); }
.pay-receipt-title { font-size: 0.95rem; font-weight: 700; text-align: center; margin-bottom: 4px; }
.pay-receipt-sub { font-size: 0.72rem; text-align: center; color: #555; margin-bottom: 10px; }
.pay-receipt hr { border: none; border-top: 1px dashed #aaa; margin: 8px 0; }
.pay-receipt-row { display: flex; justify-content: space-between; gap: 8px; }
.pay-receipt-total { font-weight: 700; font-size: 0.92rem; }
.pay-receipt-footer { font-size: 0.7rem; text-align: center; color: #666; margin-top: 10px; }

@media (max-width: 600px) { .pay-methods { grid-template-columns: 1fr; } }