/**
 * SHBET Editorial Theme - Supplementary Styles
 */

/* Search Form */
.search-form { display: flex; gap: 0; }
.search-form input { flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.search-form button {
  background: var(--text-primary); border: none; color: #fff; padding: 12px 18px;
  border-radius: 0; cursor: pointer; transition: background 0.3s;
}
.search-form button:hover { background: var(--gold-primary); }

/* Tags Cloud */
.tags-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-item { display: inline-block; border: 1px solid var(--border-color); color: var(--text-secondary); padding: 6px 14px; font-size: 0.85rem; transition: all 0.3s; }
.tag-item:hover { background: var(--text-primary); color: #fff; border-color: var(--text-primary); }

/* CTA Features */
.cta-features { margin: 15px 0; padding: 0; }
.cta-features li { color: var(--text-secondary); padding: 8px 0; font-size: 0.95rem; display: flex; align-items: center; gap: 10px; }
.cta-features li i { color: var(--gold-primary); }

/* Footer Payment */
.footer-payment-methods { margin-top: 20px; }
.footer-payment-methods h5 { color: rgba(255,255,255,0.5); font-size: 0.9rem; margin-bottom: 10px; }
.payment-icons { display: flex; gap: 10px; flex-wrap: wrap; }
.payment-icons img { height: 30px; width: auto; opacity: 0.6; }

/* Loading Spinner */
.loading-spinner { display: flex; justify-content: center; padding: 40px; }
.spinner { width: 40px; height: 40px; border: 4px solid var(--border-color); border-top-color: var(--gold-primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Alert Messages */
.alert { padding: 15px 20px; margin-bottom: 20px; font-size: 0.95rem; border-left: 3px solid; }
.alert-success { border-color: #10b981; color: #10b981; background: rgba(16,185,129,0.05); }
.alert-danger { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.05); }
.alert-info { border-color: var(--gold-primary); color: var(--gold-primary); background: rgba(201,169,97,0.05); }

/* Nav toggle mobile */
.nav-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.5rem; cursor: pointer; padding: 10px; }
.nav-toggle span { display: block; width: 25px; height: 3px; background: var(--text-primary); margin: 5px 0; }

/* 404 Page */
.error-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 60px 15px; text-align: center; }
.error-code { font-family: var(--serif-font); font-size: 120px; font-weight: 900; color: var(--gold-primary); line-height: 1; margin-bottom: 20px; }
.error-title { font-size: 32px; color: var(--text-primary); margin-bottom: 15px; }
.error-description { font-size: 16px; color: var(--text-secondary); margin-bottom: 30px; }
.error-actions { display: flex; gap: 15px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap; }
.error-actions .btn { padding: 12px 30px; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; }
.suggestion-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.suggestion-list a { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border: 1px solid var(--border-color); color: var(--text-primary); text-decoration: none; }
.suggestion-list a:hover { border-color: var(--gold-primary); }

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .nav-list { display: none; flex-direction: column; width: 100%; padding: 15px 0; }
  .nav-list.active { display: flex; }
  .nav-list > li > a { padding: 12px 20px; border-bottom: 1px solid var(--border-color); }
  .suggestion-list { grid-template-columns: 1fr; }
  .error-code { font-size: 80px; }
  .error-title { font-size: 24px; }
}

@media (max-width: 480px) {
  .error-code { font-size: 60px; }
}