.section {width:100%;min-height:100vh;background:linear-gradient(135deg,#121212,#1f1f1f);display:flex;justify-content:center;align-items:flex-start;padding:80px 20px 40px 20px;box-sizing:border-box;}
.itemshop-box {width:100%;max-width:500px;border:1px solid #333;padding:30px;border-radius:12px;background:#181818;box-shadow:0 0 25px rgba(0,0,0,0.8);}
.title {font-size:32px;font-weight:bold;margin-bottom:10px;color:#4CAF50;text-align:center;}
.subtitle {text-align:center;color:#aaa;font-size:16px;margin-bottom:30px;}
.dropdown-container {display:flex;flex-direction:column;gap:20px;}
.details-dropdown {position:relative;border-radius:6px;cursor:pointer;overflow:visible;transition:0.2s;}
summary {list-style:none;padding:12px;font-size:16px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #333;border-radius:6px;transition:0.2s;background-color:#2a2a2a;}
summary::-webkit-details-marker {display:none;}
summary i.fa-chevron-down {transition:transform 0.3s;}
.details-dropdown[open] summary i.fa-chevron-down {transform:rotate(180deg);}
.details-dropdown[open] summary,.details-dropdown[open] .options {border-color:#4CAF50;box-shadow:0 0 10px #4CAF50;}
.details-dropdown[open] .options {max-height:300px;overflow-y:auto;padding:8px 0;opacity:1;}
.options {position:absolute;top:100%;left:0;width:100%;max-height:0;overflow-y:hidden;background-color:#2a2a2a;border-radius:0 0 6px 6px;padding:0;z-index:100;opacity:0;transition:all 0.3s ease;border:1px solid #333;}
.options::-webkit-scrollbar {width:6px;}
.options::-webkit-scrollbar-track {background:#1e1e1e;border-radius:3px;}
.options::-webkit-scrollbar-thumb {background-color:#4CAF50;border-radius:3px;}
.options input {width: 90%;margin: 5px auto 10px auto;display: flex;align-items: center;padding: 8px 8px 8px 32px;border-radius: 6px;border: 1px solid #333;background-color: #1e1e1e;color: #fff;outline: none;background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 2a8 8 0 105.293 14.293l5.707 5.707 1.414-1.414-5.707-5.707A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/></svg>');background-repeat: no-repeat;background-position: 8px center;background-size: 16px 16px;}
.options input:focus {border-color:#4CAF50;box-shadow:0 0 3px #4CAF50;}
.options div {display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;color:#fff;transition:0.2s;}
.options div:hover {background-color:#333;}
.options div.selected {background-color:#4CAF50;color:#fff;font-weight:bold;}
.options div img.char-img {width:32px;height:32px;object-fit:cover;border-radius:4px;}
.options div span.char-name, .options div span.server-name {font-weight:bold;}
.options div span.char-level {margin-left:8px;color:#aaa;font-size:14px;}
.button-itemshop {width:100%;padding:14px;font-size:18px;background-color:#4CAF50;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:0.2s;display:flex;justify-content:center;align-items:center;gap:8px;}
.button-itemshop:hover {background-color:#45a049;}
.button-itemshop i {font-size:18px;}
.no-characters {padding: 12px;text-align: center;color: #aaa;font-style: italic;cursor: default;}