:root { --gold: #D4AF37; --gold-grad: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c); }
body, html { background: #000; color: #fff; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; overflow-x: hidden; }

#particles-js { position: fixed; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; background-color: #000; }
header { padding: 15px; text-align: center; background: rgba(17,17,17,0.9); border-bottom: 2px solid var(--gold); position: sticky; top: 0; z-index: 100; }
.logo { font-family: 'Cinzel', serif; font-size: 1.4rem; color: var(--gold); font-weight: bold; letter-spacing: 2px; }

.hero-banner { padding: 40px 15px; text-align: center; }
.royal-text { font-family: 'Bebas Neue'; font-size: 2.8rem; line-height: 1.0; margin: 15px 0; }
.gold-gradient-text { font-family: 'Bebas Neue'; font-size: 4.5rem; background: var(--gold-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.legend-vertical-list { padding: 15px; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.legend-row { width: 100%; max-width: 380px; cursor: pointer; transition: 0.3s ease; }
.legend-row:hover { transform: scale(1.02); }
.legend-img-card { width: 100%; height: 400px; border-radius: 20px; overflow: hidden; border: 1.5px solid #333; position: relative; background: #080808; transition: 0.3s; }
.legend-img-card img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.legend-label { position:absolute; bottom:15px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.85); color:var(--gold); padding:6px 20px; border-radius:5px; font-size:13px; font-weight:bold; border: 0.5px solid var(--gold); }
.legend-row input { display: none; }
.legend-row input:checked + .legend-img-card { border: 3px solid var(--gold); box-shadow: 0 0 30px rgba(212,175,55,0.6); }

/* Glass Form */
.details-inputs { background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); padding: 25px; border-radius: 20px; margin: 30px auto; width: 92%; max-width: 380px; box-sizing: border-box; border: 1px solid rgba(212,175,55,0.3); }
.details-inputs input { width: 100%; padding: 15px; margin-bottom: 12px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; color: #fff; outline: none; }
.pay-btn { width: 100%; padding: 18px; background: var(--gold-grad); border: none; font-family: 'Bebas Neue'; font-size: 1.8rem; border-radius: 12px; cursor: pointer; color: #000; font-weight: bold; }

.search-section { padding: 50px 20px; background: rgba(8,8,8,0.8); border-top: 1px solid #222; text-align: center; }
.search-input-group { max-width: 400px; margin: 20px auto; display: flex; gap: 10px; background: #111; padding: 8px; border-radius: 15px; border: 1px solid #333; }
.search-input-group input { flex: 1; background: transparent; border: none; color: #fff; padding: 10px; outline: none; }
.search-input-group button { background: var(--gold-grad); border: none; padding: 10px 22px; border-radius: 10px; font-weight: bold; cursor: pointer; }

footer { padding: 40px 20px; text-align: center; border-top: 1px solid #222; }
.footer-links a { color: #888; text-decoration: none; margin: 0 5px; cursor: pointer; font-size: 12px; }

.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:9999; display:flex; justify-content:center; align-items:center; padding:20px; }
.modal-content { background:#111; border:1px solid var(--gold); padding:25px; border-radius:15px; max-width:500px; width:100%; text-align:left; }