.color-selector-wrapper{margin-bottom:20px}.color-selector-button{background-color:#F8F9FA;border:1px solid #CED4DA;border-radius:4px;padding:10px 15px;cursor:pointer;transition:all 0.3s ease;font-size:16px;color:#495057}.color-selector-button:hover{background-color:#E9ECEF}.color-selector-popup{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:30px;border-radius:8px;box-shadow:0 4px 20px rgb(0 0 0 / .15);z-index:1000;width:90%;max-width:600px;max-height:80vh;overflow-y:auto}.color-selector-popup h3{margin-top:0;margin-bottom:20px;font-size:24px;color:#333;text-align:center}.color-search{width:100%;padding:10px;margin-bottom:20px;border:1px solid #CED4DA;border-radius:4px;font-size:16px}.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:15px;justify-content:center}.color-option-wrapper{display:flex;flex-direction:column;align-items:center}.color-option{width:80px;height:80px;cursor:pointer;border:1px solid #ddd;transition:all 0.3s ease}.color-option:hover{transform:scale(1.05);box-shadow:0 4px 10px rgb(0 0 0 / .1)}.color-name{margin-top:5px;font-size:14px;text-align:center}.selected-color{display:inline-block;text-align:center;margin-left:10px;font-size:16px;color:#FFF;width:40%;height:35px;text-shadow:1px 1px 1px rgb(0 0 0 / .2)}@media (max-width:768px){.color-selector-popup{width:95%;padding:20px}.color-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px}.color-option{width:60px;height:60px}}